Question

当我设置＆＃34;宽度＆＃34; .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

将px中的宽度更改为％

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

一切都会顺利进行

Answer 2

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

Answer 3

#navBlock li（0-1-0-1）比.subMenu li（0-0-1-1）更具体，这就是为.subMenu li设置的宽度被覆盖的原因。
你不应该触摸#navBlock li宽度将#navBlock li更改为#navBlock>li，就会发生魔法这是解决问题的最佳方法。

带下拉列表宽度的css菜单

3 个答案: