顯示：在Firefox

Question

表單元格符子元素寬度這是我previous question重新提出，基於進一步的實驗和研究的更多信息。

Here is a model that works in IE, Safari and Chrome, and fails in Firefox 22.

我具有以下性質中的一個下拉導航：

• 變化的寬度&高度
• 頂級元素使用顯示垂直對準的頂級元素： table，display：table-row和display：table-cell，以確保子菜單始終顯示在同一級別。
• 子菜單出現在UL是相同的寬度作爲父裏內，與位於內側的較寬子元素。

問題：顯示：表細胞僅刪除子菜單的頂級LI寬度的意識，在Firefox。它可以在我試過的每一個其他瀏覽器中使用（IE7除外，它以可接受的方式破解）。

卸下顯示：表細胞修復該問題，但帶回當子菜單出現在不同的高度時，他們的父母是不同的高度較早的問題。

我要找之一：

• 一種不同的方式，以確保在頂層LIS相等的高度
• 辦法迫使火狐正確的寬度分配給子菜單
• 的z-index固定迫使子菜單顯示在主水平菜單欄的後面，從而使子菜單，出現在不同的高度的情況下是不太難看。

幫助和建議，不勝感激。

HTML

<div id="topnavblock"> 
    <ul id="topnav"> 
     <li><a href="#">Here is a top-level menu item</a> 
      <ul> 
       <ul class="navwrap3"> 
        <li class="navwrap1"> 
         <ul class="navwrap2"> 
          <li><a href="#">Menu item 1</a></li> 
          <ul> 
           <li><a href="#">Sub-menu 2</a></li> 
           <li><a href="#">Sub-menu 2</a> 
            <ul> 
             <li>Third level nested menu</li> 
            </ul> 
           </li> 
           <li><a href="#">Sub-menu 2</a></li> 
          </ul> 
          </li> 
          <li><a href="#">Sub-menu 3</a></li> 
         </ul><!--end navwrap2--> 
        </li> <!--end navwrap1--> 
       </ul><!--end navwrap3--> 
      </ul> 
     </li> 
     <li><a href="#">Here is a top-level menu item</a></li> 
    </ul> 
</div> 

CSS

#topnavblock { 
    width:100%; 
    position:relative; 
    display:table; 
} 

#topnav { 
    display:table-row; 
} 

#topnav > li { 
    max-width:100px; 
    display:table-cell; 
    vertical-align: middle; 
    border-right: 1px solid yellow; 
} 

ul#topnav li .navwrap1 { 
    background: yellow; 
    width: 210px; 
    position: relative; 
} 

ul#topnav li .navwrap2 { 
    background:grey; 
} 

ul#topnav > li > ul { 
    border-right: 3px solid red;  
} 

ul#topnav ul .navwrap3 { 
    border-left:3px solid green; 
    padding-top:60px; 
} 

ul#topnav .navwrap2 li { 
    float: none; 
    background:lightgreen; 
    width:100%; 
} 

ul#topnav li:hover ul { 
    visibility: visible; 
} 

Answer 1

<li><a href="#">Menu item 1</a></li>線不應</li>標籤結束。