2 Replies Latest reply on Apr 6, 2010 10:11 AM by bearcatnat

    Nested Navigation Menu, Pure CSS

    bearcatnat

      Argh! Can anyone help me perfect my nested navigation menu?? I had originally built it as a single level vertical menu, but now need to add 2 more levels. I got the second level working fine, except I can't get the rollover effect to line up correctly for the life of me!

       

      In Dreamweaver Live View, the highlighted effect (an image rollover) and the link text jumps up and to the left. When I test in IE8 or Firefox 3.5.7, the rollovers for the second level don't even appear.

       

      This is my first time using nested ul's for a menu, so I'm thoroughly confusing myself.

       

      Here's a page with the menu in place (left side):

       

      http://www.wdi-whq.com/pages/about-us.html

       

      And here's my css. The menu section rules are under "3. Navigation Code".

       

      http://www.wdi-whq.com/css/wdi-basic.css

       

      Any help is greatly appreciated!

        • 1. Re: Nested Navigation Menu, Pure CSS
          martincou Level 3

          Hi,

           

          I had a rule to your a:hover to target the deepest list I could :

           

          .twoColHybLtHdr ul#navlist a:hover, .twoColHybLtHdr ul#navlist li ul li a:hover {
              background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-hilight.gif) left;
          }

           

          It worked, but I think you'll have to expend your background image to make your text (Black and White Copies) appear with spoace around it.

           

          It's a good start !

          • 2. Re: Nested Navigation Menu, Pure CSS
            bearcatnat Level 1

            I tweaked with this some more yesterday. It seems to be working just fine today as far as my spacing and things lining up. I just need to shorten Black and White Copies to Black

            & White Copies so it will fit within the width of my background image. I think I simplified my rules, and changed the second-level hover rule to match the first-level one.

             

            Martyn, your rule helped me fix my problem with the highlight hover effect not working on the second and third levels. Yeah! I just didn't know how to target those nested levels. Thanks so much for your help!