具有下拉菜單寬度的CSS菜單

Question

當我設置.topMenu li的“ width”屬性時，即使我將.subMenu的位置設置為絕對，它的寬度也太窄。 它也是水平的而不是垂直的。 為什么？

HTML

    <div id="navigation">
            <ul id="navBlock">
                <li>HOME</li>
                <li class="topMenu">
                    ABOUT US
                    <ul class="subMenu">
                        <li>WELCOME</li>
                        <li>HISTORY</li>
                    </ul>   
                </li>
         </ul>      
    </div>

的CSS

#navBlock{
     margin: 0;
     padding: 0;    
     list-style-type: none;  
}
#navBlock li{ 
    display: inline-block; 
    border:1pt solid #ccc;
    width:20%;
    text-align:center;
    background:#fff;
    position:relative;
}
#navBlock li:hover{ 
    cursor:pointer;
    background:orange;  
}
.topMenu:hover .subMenu{
    display:block;      
    position:absolute;
}   
.subMenu{
    display:none;
    margin: 0;
    padding: 0;             
}
.subMenu li{
    border:1pt solid #aaa;
    background:#fff;        
    width:200px;        
    display: inline; 
    position:absolute;
}
.subMenu li:hover{
    float:none;
}   

http://jsfiddle.net/L28Lf3se/

Answer 1

更改寬度（以px為單位）比％

#navBlock li{ 
    display: inline-block; 
    border:1pt solid #ccc;
    width:150px;
    text-align:center;
    background:#fff;
    position:relative;
}

一切都會順利進行

Answer 2

問題是特異性之一。 .subMenu li覆蓋了#navMenu li CSS，因為它認為它更具體。 整個塊都沒有被使用。 將.subMenu li重新標記為#navBlock li ul li ，您會很方便。

Answer 3

#navBlock li （0-1-0-1）超過特定.subMenu li （0-0-1-1）這就是為什么你設置寬度為.subMenu li都得到overrided。
您不應該觸摸#navBlock li寬度。
將#navBlock li更改為#navBlock>li ，將發生魔術。
這是解決問題的最佳方法。