8 Replies Latest reply on Aug 22, 2013 7:15 AM by Daniel_Hogg

    Nested List on a CSS menu bar not working correctly

    Daniel_Hogg

      Hi, Im trying to create a CSS menu bar with drop down menus, seems straight forward and I can create one from scratch but when trying to add a drop down menu to a previously made CSS menu bar, the nested list im trying to code in on main list doest nest it, but instead just adds another button to the side of the menu. Getting a bit confised by it. So what I want is another menu to drop down on "Our Services" by adding in another <ul> and <li> tag after the "our services closing <a/> tag. Im no coding expert so maybe theres something really simple im missing. Heres the code im trying to use to make the drop down menu work:

       

      <div id="Menu_bar_content">

              <ul>

                <li><a href="#">About Us</a></li>

                <li><a href="#">Managerial Team</a></li>

                <li><a href="#">Our Services ▼</a>

       

                <ul>

               

                <li><a href="#">Community Life Choices</a></li>

                <li><a href="#">Residential Care</a></li>

                <li><a href="#">Short Breaks</a></li>

               

                </ul><!--end of nested list-->

               

                </li> <!--end of "our Services"-->

                <li><a href="#">Career Opportunities</a></li>

                <li><a href="#">Contact Us</a></li>

              </ul>

            </div>

        • 1. Re: Nested List on a CSS menu bar not working correctly
          osgood_ Level 8

          Like this?

           

           

          <div id="Menu_bar_content">

          <ul>

          <li><a href="#">About Us</a></li>

          <li><a href="#">Managerial Team</a></li>

          <li><a href="#">Our Services ▼</a>

          <ul>

          <li><a href="#">Community Life Choices▼</a>

          <ul>

          <li><a href="#">Link 1</a></li>

          <li><a href="#">Link 2</a></li>

          <li><a href="#">Link 3</a></li>

          </ul><!--end of community life choices list-->

          </li>

          <li><a href="#">Residential Care</a></li>

          <li><a href="#">Short Breaks</a></li>

          </ul><!--end of nested list-->

          </li> <!--end of "our Services"-->

          <li><a href="#">Career Opportunities</a></li>

          <li><a href="#">Contact Us</a></li>

          </ul>

          </div>

           

           

          OR his maybe:

           

           

          <div id="Menu_bar_content">

          <ul>

          <li><a href="#">About Us</a></li>

          <li><a href="#">Managerial Team</a></li>

          <li><a href="#">Our Services ▼</a>

          <ul>

          <li><a href="#">Additional Link▼</a></li>

          <li><a href="#">Link 1</a></li>

          <li><a href="#">Link 2</a></li>

          </ul><!--end of nested list-->

          <ul>

          <li><a href="#">Community Life Choices▼</a></li>

          <li><a href="#">Residential Care</a></li>

          <li><a href="#">Short Breaks</a></li>

          </ul><!--end of nested list-->

          </li> <!--end of "our Services"-->

          <li><a href="#">Career Opportunities</a></li>

          <li><a href="#">Contact Us</a></li>

          </ul>

          </div>

          • 2. Re: Nested List on a CSS menu bar not working correctly
            Jon Fritz II Adobe Community Professional & MVP

            The answer is in your code (just not the code you posted).

             

            What you describe sounds like there is nothing in the css to define the style of a sub menu, or you are missing the classes/ids in the sub menu HTML to attach the css.

             

            If you could post a link to the problem page so we can see it functioning/malfunctioning in our browsers, it would lead to an answer much more quickly than posting code snippets.

            • 3. Re: Nested List on a CSS menu bar not working correctly
              Daniel_Hogg Level 1

              Yes sorry there are style sheets attached to the menu bar, I didnt post the full code, my bad. Im still working on the site. Is there somewhere quickly I can temporarily upload the page so you could look at the whole thing?

              • 4. Re: Nested List on a CSS menu bar not working correctly
                Jon Fritz II Adobe Community Professional & MVP

                The best way is to create a folder on a server you have access to called TEST, then publish to that folder.

                 

                If you're worried about search engines finding it, when you post the link here, leave out the http:// in the address.You can make double sure they don't index it by adding this to the <head> section...

                 

                <meta name="robots" content="noindex, nofollow" />

                 

                Once the problem is found, just delete TEST from the server and nobody will ever find the page by accident.

                • 5. Re: Nested List on a CSS menu bar not working correctly
                  Daniel_Hogg Level 1

                  Ok, heres the basic layout of the site:

                   

                  http://www.skillsforliving.co.uk/TEST/Index.html

                   

                  I deleted what I tried to do to begin as it didn't work so theres no coding attempt for the drop down here. Id like to get a dropdown menu on "Our Services" , but when I try and add another <ul> inside the "Our Services" <ul>, it just adds the buttons to the side and not nested into "Our Servies" I hope im making myself clear about the problem, admittedly I'm a complete nooby on this. Could possibly be something to do with the CSS code? I followed this tutorial on youtube to help me create the nav bar:

                   

                  http://www.youtube.com/watch?v=SePC2AL-okI

                  • 6. Re: Nested List on a CSS menu bar not working correctly
                    osgood_ Level 8

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                    <html xmlns="http://www.w3.org/1999/xhtml">

                    <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                    <title>CSS Dropdown Menu</title>

                    <style>

                    /* These styles create the dropdown menus. */

                    #menu_bar_content {

                    height: 66px;

                    width: 880px;

                    float: left;

                    }

                    #menu_bar_content ul {

                    margin: 0;

                    padding: 0;

                    }

                    #menu_bar_content li {

                    list-style: none;

                    float: left;

                    }

                    #menu_bar_content li a {

                    font-family: Arial, Helvetica, sans-serif;

                    padding: 10px 0;

                    background-color: #198CD2;

                    width: 150px;

                    text-align: center;

                    text-transform: capitalize;

                    text-decoration: none;

                    color: #FFF;

                    border: 1px solid #FFF;

                    font-size: 16px;

                    -webkit-transition: all 500ms;

                    -moz-transition: all 500ms;

                    -ms-transition: all 500ms;

                    -o-transition: all 500ms;

                    transition: all 500ms;

                    display: block;

                    margin-left: 10px

                    }

                    #menu_bar_content ul li a:hover {

                    background-color: #2A4F73;

                    }

                    #menu_bar_content li ul {

                    display: none;

                    }

                    #menu_bar_content li:hover ul, #menu_bar_content li.hover ul {

                    display: block;

                    position: absolute;

                    margin: 0;

                    padding: 0;

                    }

                    #menu_bar_content li:hover li, #menu_bar_content li.hover li {

                    float: none;

                    }

                    #menu_bar_content li:hover li a, #menu_bar_content li.hover li a {

                     

                    border-bottom: 1px solid #fff;

                    color: #000;

                    }

                    #menu_bar_content li li a:hover {

                    background-color: #8db3ff;

                    }

                    </style>

                     

                    </head>

                    <body>

                       <div id="menu_bar_content">

                          <ul>

                        

                             <li><a href="#">About Us</a></li>

                             <li><a href="#">Our Services</a>

                                <ul>

                                   <li><a href="#">Sub Item 1</a></li>

                                   <li><a href="#">Sub Item 2</a></li>

                                   <li><a href="#">Sub Item 3</a></li>

                                   </ul>

                             </li>

                             <li><a href="#">Managerial Team</a></li>

                             <li><a href="#">Career Opportunities</a></li>

                             <li><a href="#">Contact Us</a></li>

                          </ul>

                     

                       </div>

                     

                    </body>

                    </html>

                    • 7. Re: Nested List on a CSS menu bar not working correctly
                      Daniel_Hogg Level 1

                      Wow thanks a lot! That worked exactly how i wanted it!!! Many Thanks, osgood_

                      • 8. Re: Nested List on a CSS menu bar not working correctly
                        Daniel_Hogg Level 1

                        Only one problem, not all of the buttons are using the transition fading effect on hover, only the sub menu items have the fading effect now, any way to quickyl fix this?

                         

                        Edit: Fixed, all sorted.

                         

                        Thanks for the help everyone!