具有下拉菜单宽度的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 ，将发生魔术。
这是解决问题的最佳方法。