html - 具有下拉列表 li 宽度的 css 菜单

Question

当我设置 .topMenu li 的“宽度”属性时，.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

问题是特异性之一。 .subMenu li 的 CSS 被 #navMenu li 覆盖，因为它认为它更具体。整个街区都没有被使用。将 .subMenu li 重新标记为 #navBlock li ul li 就可以了。