CSS DropDown Menu Bug修復

Question

我用CSS創建了一個DropDown菜單，但我無法解決一個問題：最後一個Menu元素的寬度小於DropDown的寬度。 下面是代碼： http://jsfiddle.net/eeFdP/

我也許可以用寬度暫時解決問題，但它不是一個合乎邏輯的和永久的解決辦法，考慮到菜單可以與新元素擴展。 請幫忙？

HTML代碼：

<ul> 
    <li><a href="#">Home</a></li> 
    <li> 
    <a href="#">Tutorials</a> 
     <ul> 
      <li><a href="#">PHP</a></li> 
      <li><a href="#">CSS</a></li> 
      <li><a href="#">Javascript</a></li> 
     </ul> 
    </li> 
    <li> 
    <a href="#">Contact</a> 
     <ul> 
      <li><a href="#">By contact</a></li> 
      <li><a href="#">By email</a></li> 
     </ul> 
    </li> 
</ul> 
<div class="clear"></div> 
<p>I am a paragraph.</p> 

CSS代碼：

.clear { 
     clear:both; 
    } 

    ul { 
     list-style-type:none; 
     padding:0; 
     margin:0; 
    } 
    ul>li { 
     float:left; 
    } 

    ul>li>a { 
     display:block; 
     padding:5px 10px; 
     color:#000; 
     text-decoration:none; 
     background:#fff; 
     border-bottom:1px solid #ccc; 
    } 
    ul>li>a:hover { 
     background-color:#bbb; 
     color:white; 
    } 

    ul>li>ul { 
     position:absolute; 
     display:none; 
    } 
    ul>li>ul>li { 
     float:none; 
    } 
    ul>li:hover>ul { 
     display:block; 
    } 

Answer 1

而不是使用您的下拉列表中absolute定位，您可以使用relative位置0高度和overflow: visible。此外，您可以使用visibility: hidden/visible而不是display: none/block。這將使父母的成員知道他們的孩子。

http://jsfiddle.net/eeFdP/4/

ul > li > ul { 
    position: relative; 
    visibility: hidden; 
    height: 0; 
} 

ul > li:hover > ul { 
    visibility: visible; 
} 

Answer 2

簡單的寬度添加到您的父元素。像這樣：

CSS：

.clear { 
      clear:both; 
     } 

     ul { 
      list-style-type:none; 
      padding:0; 
      margin:0; 
     } 
     ul>li { 
      float:left; 
     } 

     ul>li>a { 
      width: 100px; /*-- Added width, specify to your liking --*/ 
      display:block; 
      padding:5px 10px; 
      color:#000; 
      text-decoration:none; 
      background:#fff; 
      border-bottom:1px solid #ccc; 
     } 
     ul>li>a:hover { 
      background-color:#bbb; 
      color:white; 
     } 

     ul>li>ul { 
      position:absolute; 
      display:none; 
     } 
     ul>li>ul>li { 
      float:none; 
     } 
     ul>li:hover>ul { 
      display:block; 
     } 

HTML：

<ul> 
     <li><a href="#">Home</a></li> 
     <li> 
     <a href="#">Tutorials</a> 
      <ul> 
       <li><a href="#">PHP</a></li> 
       <li><a href="#">CSS</a></li> 
       <li><a href="#">Javascript</a></li> 
      </ul> 
     </li> 
     <li> 
     <a href="#">Contact</a> 
      <ul> 
       <li><a href="#">By contact</a></li> 
       <li><a href="#">By email</a></li> 
      </ul> 
     </li> 
    </ul> 
<div class="clear"></div> 
<p>I am a paragraph.</p> 

這裏是工作的jsfiddle以及向您展示：http://jsfiddle.net/eeFdP/1/

這應該做的伎倆伴侶，希望幫助;）

Answer 3

添加相對定位到您的列表項迫使最後下拉菜單與右側菜單齊平。

http://jsfiddle.net/eeFdP/3/

ul>li { 
    float: left; 
    position: relative; 
}