Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Dropdown Menu

  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Dropdown Menu

    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>

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    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

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    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;
    	  
    	  }

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    You also need to put the submenu , inside of the LI that its dropdown like i had shown in my example

  • Users who have thanked aaronhockey_09 for this post:

    grundig (10-29-2012)

  • #6
    New to the CF scene
    Join Date
    Oct 2012
    Location
    Scottsdale, AZ
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Misspelling

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

    ul#nav li ul {

    display: none;

    positiom: absolute;

    margin-top: 30px;

    left:0;

    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •