Question

I have a css drop down menu working except for one thing: the last menu (3rd tier) only shows the last item in the list.

The page is currently here: http://www.hodentalcompany.com/pages/syringe2.html
The menu is at the bottom of the right column on the text, “Order from your dealer”

As you can see, there is only one item displaying in the last menu. Here is the css:

#DealerNav { margin: 0; padding: 0; }
#DealerNav li { list-style-type: none; position: relative; }
#DealerNav li ul { display: none; }
#DealerNav a.first { width:100%; font-size: 100%;font-weight: bold; color: #54ABDF; background-color: #FFF; margin-left:-.5em; }
#DealerNav a { display:block; font-size: 90%; width: 12em; padding: .5em; margin: 2px 0; background-color: #54ABDF; color: #FFF;  }
#DealerNav a:hover { color: #CEF; }
#DealerNav a:hover.first { color: #38B; }
#DealerNav li li a { margin-left:-3.25em; }
#DealerNav li:hover > ul { display: block; }
#DealerNav ul ul a { margin-left:6.45em; margin-top: -2.25em; }

And, here is the simplified code:

<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> 
             <li>  
                <a href="http://www.burkhartdental.com" target="_blank">
                Burkhart Dental</a>
             </li>
             <li>
                <a href="http://www.smartpractice.com/cgi-bin/WebObjects/SmartPracticeStore.woa/wa/gotoStyle?styleNumber=S699230&g=AF_HODENTAL" target="_blank">
                Smart Practice
                </a>
             </li>
       </ul>
    </li>
    <li><a href="#">BFC Complete<br />(prefilled with Vaccu•sil)</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.smartpractice.com/cgi-bin/WebObjects/SmartPracticeStore.woa/wa/gotoStyle?styleNumber=S699230&g=AF_HODENTAL" target="_blank">
                Smart Practice
                </a>
             </li>
       </ul> 
    </li> 

What’s wrong?

Answer 1

Because you used a negative margin-top, all of the submenu items overlap each other. This causes only the last submenu item to be visible. Instead of using a negative margin, you can use position: absolute to position submenus to the right of each menu item. Take a look at this jsfiddle to see the details of this approach.