最後一層的CSS下拉菜單隻顯示一個項目

我有一個CSS下拉菜單工作除了一件事：最後一個菜單（第三層）只顯示列表中的最後一個項目。最後一層的CSS下拉菜單隻顯示一個項目

的頁當前位置：http://www.hodentalcompany.com/pages/syringe2.html 菜單是在對文本右列的底部，「從經銷商處訂購」

正如你所看到的，只有一個項目在最後顯示菜單。這裏是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; }

而且，這裏是簡化代碼：

<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>

有什麼不對？

來源

2012-10-11 JustBobF

因爲您使用了負數margin-top，所有子菜單項目都相互重疊。這會導致只有最後一個子菜單項可見。您可以使用position: absolute將子菜單定位到每個菜單項的右側，而不是使用負邊距。看看jsfiddle來看看這個方法的細節。

來源

2012-10-11 02:33:44 nathan

謝謝！那小提琴太棒了！我不認爲我可以自己做。（事情並沒有完全對齊，即使在一個帶有鏈接樣式表的新Dreamweaver HTML文件中（頁面樣式也沒問題，雖然......奇怪），但是我能夠弄清楚要改變什麼，它看起來很棒！謝謝！ – JustBobF

嘗試改變這個CSS：

#DealerNav li:hover > ul { 
    display: block; 
    position: absolute; 
    top: 0px; 
} 
#DealerNav ul ul a { 
    margin-left: 6.45em; 
    display: block; 
}

來源

2012-10-11 02:43:30 rusly

最後一層的CSS下拉菜單隻顯示一個項目

回答

相關問題