Dropdown Menu

grundig · 10-24-2012, 12:59 AM

I am new to coding and I have created a menu bar. I now need to make it dropdown but I seem to be having a problem. Could anyone help.

This is the css code:

Code:

<style>
      
      html, body, ul, li, a {
        
        margin: 0;
        
        padding: 0;
        
      }
      
      ul#nav {
        
        list-style: none;
        
        margin: 20px auto;
        
        width: 960px;
        
      }
      
      ul#nav li {
        
        float: left;
        
        width: 192px;
        
      }
      
      ul#nav li a {
        
        background: #17A30C;
        
        border-bottom-color: #222;
        
        border-left-color: #057005;
        
        border-right-color: #C5FCC5;
        
        border-top-color: #222;
        
        border-style: solid;
        
        border-width: 1px;
        
        color: #FFF;
        
        display: block;
        
        font-size: 24px;
        
        font-family: Arial, sans-serif;
        
        font-weight: bold;
        
        padding: 10px;
        
        text-align: center;
        
        text-decoration: none;
        
        width: 170px;
        
      }
      
      ul#nav li a:hover {
        
        background: #40D63F;
        
      }
      
    </style>

And this is the HTML Code

Code:

 <body>
    
    <ul id="nav">
      
      <li><a href="#" id="home">Home</a></li>
      
      <li><a href="#" id="job_seekers">Job Seekers</a></li>
      
      <li><a href="#" id="employers">Employers</a></li>
      
      <li><a href="#" id="about_us">About Us</a></li>
      
      <li><a href="#" id="contact_us">Contact Us</a></li>
      
    </ul>
    
  </body>

aaronhockey_09 · 10-24-2012, 02:41 AM

To make a drop down menu first you need a sub menu - like so

Code:

<ul id="nav">
      
      <li><a href="#" id="home">Home</a></li>
      
      <li><a href="#" id="job_seekers">Job Seekers</a></li>
      
      <li><a href="#" id="employers">Employers</a></li>
      
      <li><a href="#" id="about_us">About Us</a></li>
      
      <li><a href="#" id="contact_us">Contact Us</a>
             <ul>
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
             </ul>
      </li>
      
    </ul>

And then you need to make css for this submenu
you need to make it hidden at first, and then display on hover like so

Code:

ul#nav li ul { display:none; }
ul#nav li:hover ul { display:block; }

And to position your submenu, you probably need to use position absolute, and move it down a bit like something like this.

Code:

ul#nav li ul { display:none; position:absolute; margin-top:30px; left:0; }

Hope this helps
Cheers

grundig · 10-24-2012, 02:52 PM

Thanks for that. I have applied the code to the page and it now just displays 4 new menues under the origional one. Is it something to do with hiding the sub menu until someone hovers over the main one then it is displayed?

The code is now:

Code:

<style>
      
      html, body, ul, li, a {
        
        margin: 0;
        
        padding: 0;
        
      }
      
      ul#nav {
        
        list-style: none;
        
        margin: 20px auto;
        
        width: 960px;
        
      }
      
      ul#nav li {
        
        float: left;
        
        width: 192px;
        
      }
      
      ul#nav li a {
        
        background: #17A30C;
        
        border-bottom-color: #222;
        
        border-left-color: #057005;
        
        border-right-color: #C5FCC5;
        
        border-top-color: #222;
        
        border-style: solid;
        
        border-width: 1px;
        
        color: #FFF;
        
        display: block;
        
        font-size: 24px;
        
        font-family: Arial, sans-serif;
        
        font-weight: bold;
        
        padding: 10px;
        
        text-align: center;
        
        text-decoration: none;
        
        width: 170px;
        
      }
      
      ul#nav li a:hover {
        
        background: #40D63F;
        
      }
	  
	  ul#nav li ul {
	  
	  display:none;
	  
	  }
	  
	  ul#nav li hover ul {
	  
	  display: block;
	  
	  }
	  
	  ul#nav li ul {
	  
	  display: none;
	  
	  positiom: absolute;
	  
	  margin-top: 30px;
	  
	  left:0;
	  
	  }
	  
	  
      
    </style>

Code:

</head>
  
  <body>
    
    <ul id="nav">
      
      <li><a href="#" id="home">Home</a></li>
      
      <li><a href="#" id="job_seekers">Job Seekers</a></li>
	  	
      <li><a href="#" id="employers">Employers</a></li>
      
      <li><a href="#" id="about_us">About Us</a></li>
      
      <li><a href="#" id="contact_us">Contact Us</a></li>
	  
          <ul>
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
          </ul>

      </li>
      
    </ul>
    
  </body>
  
</html>

aaronhockey_09 · 10-24-2012, 04:37 PM

You are missing a colon in your code here

Code:

ul#nav li hover ul {
	  
	  display: block;
	  
	  }

should be

Code:

ul#nav li:hover ul {
	  
	  display: block;
	  
	  }

aaronhockey_09 · 10-24-2012, 05:14 PM

You also need to put the submenu , inside of the LI that its dropdown like i had shown in my example

liongate · 11-01-2012, 07:58 PM

Careful -- you've also got "position" misspelled as "positiom":

ul#nav li ul {

display: none;

positiom: absolute;

margin-top: 30px;

left:0;

}