Question

I would like to add a CSS-only drop down menu to a site. I am able to do this with just one drop, but am having trouble with adding another tier to the menu.

I am able to get the list to hide initially, but when the trigger is hovered over, the entire list becomes visible, instead of just the first tier of the drop down list.

This is part of the list:

 <ul id="DealerNav">
<li><a href="#" class="first">Order from your dealer</a>
    <ul>
    <li><a href="#">BFC Syringe (empty)</a>
            <ul>
            <li><a href="http://www.atlantadental.com" target="_blank">Atlanta Dental</a></li>
            <li><a href="http://www.benco.com" target="_blank">Benco Dental</a></li> 
       </ul> 
    </li> 
    <li><a href="#">BFC Complete</a>
          <ul>
          <li><a href="http://practicon.com/Harmony-Intro-Pack/p/70-90122/" target="_blank">Practicon Dental</a></li>
          </ul>
             </li>
    <li><a href="#">Vaccu•sil Heavy Body</a>
         <ul>
            <li><a href="http://www.atlantadental.com" target="_blank">Atlanta Dental</a></li>
            <li><a href="http://www.benco.com" target="_blank">Benco Dental</a></li> 
             <li><a href="http://www.burkhartdental.com" target="_blank">Burkhart Dental</a></li>

       </ul> 
    </li>      
  </ul>

And, this is the CSS that controls it:

#DealerNav { margin: 0; padding: 0; font-weight: bold; }

#DealerNav li { list-style-type: none; font-size: 100%; position: relative; margin-left: -3em; }

#DealerNav li li { margin: 2px 0; }

#DealerNav li ul { display: none; }

#DealerNav a.first { width:100%; color: #555; background-color: #FFF; margin-left: 2.5em; }

#DealerNav a { display:block; width: 12em; padding: .5em; background-color: #CEF; color: #FFF;  }

#DealerNav a:hover { color: #555; }

#DealerNav a:hover.first { color: #CEF; }

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

#DealerNav ul ul { margin-left:10em; margin-top: -2.25em; }

Is this too complicated to ask help on?

The page in question is temporarily at:
http://www.hodentalcompany.com/pages/syringe2.html

The menu is at the bottom of the right column on the text, “Order from your dealer”

Thanks everyone for any help!

Answer 1

Change this:

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

to this:

#DealerNav li:hover > ul { display: block; }

You only want the first child UL to show, not all of them.,