設置下拉寬度比菜單長

Question

我一直在嘗試不同的事情，仍然能夠得到我想要的。我想創建一個菜單。我希望菜單寬度大約爲20px，下拉菜單爲80-100px。

<div id="menulevel2grouping2"> 
       <ul> 
        <li><a href="#" onClick="">T</a> 
         <ul> 
          <li><a href="#" onClick="">Type 1</a></li> 
          <li><a href="#" onClick="">Type 2</a></li> 
          <li><a href="#" onClick="">Type 3</a></li> 
          <li><a href="#" onClick="">Type 4</a></li> 
         </ul> 
        </li> 
        <li><a href="#" onClick="">S</a> 
         <ul> 
          <li><a href="#" onClick="">Small</a></li> 
          <li><a href="#" onClick="">Medium</a></li> 
          <li><a href="#" onClick="">Large</a></li> 
         </ul>  
        </li> 
       </ul> 

      </div> 



    #menulevel2grouping2{ 
    margin: 0px; 
    padding: 0px; 
} 

#menulevel2grouping2 ul{ 
    margin: 0px; 
    padding: 0px; 
    line-height: 30px; 


} 

#menulevel2grouping2 li{ 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    float: left; 
    position: relative; 


} 

#menulevel2grouping2 ul li a{ 
    text-align: center; 
    font-family: Helvetica, Verdana Arial, sans-serif; 
    font-size: 12px; 

    background-color: blue; 

    width: 60px; 

    text-decoration: none; 

    display: block; 
    color: #000000; 
}  

#menulevel2grouping2 ul ul{ 
    position: absolute; 
    display: none; 
    top: 30px 
} 

#menulevel2grouping2 ul li:hover ul{ 
    display: block; 

} 

關於如何完成它的任何想法？

謝謝！

Drjay

Answer 1

這是你想要的效果嗎？在這裏看到小提琴：http://jsfiddle.net/scTgZ/

我修改了你的css。看小提琴。

Answer 2

首先，你應該儘可能的提供class和id到元素，以避免併發症的發生。這是CSS的目的，爲了方便事情，而不是使它們複雜化。

無論如何，這樣的事情應該工作：

#menulevel2grouping2 ul li{width:20px; position:relative; z-index:10} 
#menulevel2grouping2 ul li ul li{width:200px; position:relative; z-index:10} 

你可能不需要的位置和z索引（我沒有測試它），你可能需要一些浮在上層裏，但這應該足以給你一個想法