Question

HTML

<div id='cssmenu'> 
    <ul> 
     <li class='active'> 
      <a href="Index.aspx">HOME</a> 
     </li> 
     <li> 
      <a href="AboutUs.aspx">ABOUT US</a> 
     </li> 
     <li class='has-sub '> 
      <a href="Products.aspx">PRODUCTS</a> 
      <ul> 
       <li class='has-sub '> 
        <a href='#'>Product 1</a> 
        <ul> 
         <li><a href='#'>Sub Item</a></li> 
         <li><a href='#'>Sub Item</a></li> 
        </ul> 
       </li> 
       <li class='has-sub '> 
        <a href='#'>Product 2</a> 
        <ul> 
         <li><a href='#'>Sub Item</a></li> 
         <li><a href='#'>Sub Item</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="Services.aspx">SERVICES</a> 
     </li> 
     <li> 
      <a href="Enquiry.aspx">ENQUIRY</a> 
     </li> 
     <li> 
      <a href="ContactUs.aspx">CONTACT US</a> 
     </li> 
    </ul> 
</div> 

Fiddle

正如你可以看到列表項產品的子菜單此崩潰我對這個工作超過了小提琴..一個小時，你能幫助我在哪裏做錯誤，並且需要清楚的解釋。

Answer 1

是的，@vals和@shomz是一半正確的。

你需要添加height:100%;到#cssmenu ul ul

，但修復產品1和產品2子菜單重疊，您需要更改：

#cssmenu ul ul ul { 
    top: 0; 
    left: auto; 
    right: -99.5%; 
} 

TO：

#cssmenu ul ul ul { 
    top: 0; 
    left: 100%; 
} 

@shomz是對的，這裏有很多不必要的樣式。

例如，您可以定義#cssmenu ul ul ul兩次：

一次是：

#cssmenu ul ul ul { 
    top: 0; 
    left: auto; 
    right: 100%; 
} 

，第二次爲：

#cssmenu ul ul ul { 
    border-top: 0 none; 
} 

你需要回去，並結合重複的例子一樣這是因爲如果您離開第一個定義了top和left的那個，那麼在border之一中，您將top:0;和left: 100%;，我描述的東西是行不通的。

Answer 2

#cssmenu ul li的100％高度導致它重疊。這需要家長UI元素的高度，這是0

在這裏看到：http://jsfiddle.net/SQ5Cp/26/

這解決了問題，但你或許應該考慮重寫它的某些部分在未來的（如消除絕對定位孩子ul元素等）。

Answer 3

只是有點落後Shomz答案...

不過，我會解決這種方式（增加高度100％的第二級UL）：

#cssmenu ul ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 100%; 
    height: 100%; /* added */ 
} 

fiddle

變化也用於子菜單

#cssmenu ul ul ul { 
    top: 0; 
    left: 100%; 
} 

fiddle 2