Jump to content
jamesadrian

Drop-Down Menu without CSS

Recommended Posts

My web pages each avoid the use of a separate CSS file this way:

 

<!DOCTYPE html>
<html>
<head>

 

<style>
a.link_style0:link {color: #000000; text-decoration: none;}
a.link_style0:visited {color: #000000; text-decoration: none;}
a.link_style0:hover {color: #00AA00; text-decoration: none;}
a.link_style0:active {color: #000000; text-decoration: none;}

a.link_style1:link {color: #000000;}
a.link_style1:visited {color: #000000;}
a.link_style1:hover {color: #00AA00;}
a.link_style1:active {color: #000000;}


</style>

</head>

 

So far, this method is only used for links such as this one:

<a href="https://www.futurebeacon.com/" class = link_style0>FutureBeacon.com</a>

 

I would like to have a pull-down menu on a web page, but all the examples I have found seem to depend on a separate CSS file with I would like to avoid.  Is this possible?

Thank you for your help.

 

Jim Adrian

 

 

Edited by jamesadrian
typo

Share this post


Link to post
Share on other sites

You should have your CSS in a separate file, it only has to be one file. With that said, you can put CSS code anywhere. If an example has the CSS in another file, you can just copy the code and put it in your HTML document between style tags.

Share this post


Link to post
Share on other sites

Ingolme,

 

Thank you for this reply.

Can I place the CSS material between head and /head?

This is an example to be placed between body and /body of of the html file:

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Would the CSS material go in between the style /style terms which I have between head and /head?

Thank you for your help.

 

Jim Adrian

 

 

 

 

Share this post


Link to post
Share on other sites

Yes, CSS code goes in the <head> section of the document.

Share this post


Link to post
Share on other sites

Ingolme,

Thank you for this reply.

I copied the code from this site

https://www.w3schools.com/howto/howto_css_dropdown.asp

I put the CSS material between head and /head.

I used the html code suggested by that page.

The resultant html page had the CSS material printed out at the top of the page instead of being hidded and affecting the html code.

Is there something I should place at the top of the CSS material to announce it or contain it?

Thank you for your help.

 

Jim Adrian

 

 

 

 

Share this post


Link to post
Share on other sites

It has to be between <style> tags.

Share this post


Link to post
Share on other sites

Ingolme,

Thank you for this suggestion.  It worked.

I have a problem with the code:

<!DOCTYPE html>
<html>
<head>

<style>

 /* Dropdown Button */

<!-- Dropdown Button -->
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

<!-- The container <div> - needed to position the dropdown content -->
.dropdown {
    position: relative;
    display: inline-block;
}

<!-- Dropdown Content (Hidden by Default) -->
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

<!-- Links inside the dropdown -->
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

<!-- Change color of dropdown links on hover -->
.dropdown-content a: hover {background-color: #f1f1f1}

<!-- Show the dropdown menu on hover -->
.dropdown :hover .dropdown-content {
    display: block;
}

<!-- Change the background color of the dropdown button when the dropdown content is shown -->
.dropdown: hover .dropbtn {
    background-color: #3e8e41;
}
</style>

</head>

<body style="background-image: url(https://www.futurebeacon.com/fb1.png);">

<div style="position: absolute; top: 120px; left: 300px; font-size: 40px; line-height: 30px; font-family: times new roman;">
<b>Page Name</b>
</div>


<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />

 <div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="https://www.futurebeacon.com/">Link 1</a>
    <a href="https://www.futurebeacon.org/">Link 2</a>
    <a href="https://www.futurebeacon.com/email.htm">Link 3</a>
  </div>
</div>
<br /><br />
<br /><br />
<br /><br />


</body>
</html>

I changed the comment indicators from /* and */ to <!-- and -->.  I hope that does not matter.

The links in the menu work, but the menu is not hidden before it is pulled down.  Can you suggest anything?

Thank you for your help.

 

Jim Adrian

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×