具有自动列表项目宽度的下拉菜单 [英] Dropdown Menus with Auto List-Item Widths

问题描述

所以我正在做一个下拉菜单，我想让每个菜单项有一个自动宽度。即扩展到菜单项宽度的背景，而不是具有用于所有UL的总固定宽度。我认为给予ul li自动宽度会排序，但它似乎不。

So I'm working on a drop menu and I'd like each menu item to have an auto width. i.e. the background to expand to the width of the menu item rather than having an overall fixed width for all the UL. I thought that giving the ul li an auto width would sort it but it seems not. What am I missing?

<ul id="nav">
<li><a class="last" href="#">MENU &#9660;</a>
    <ul>
        <li><a href="#">Short</a></li>
        <li><a href="#">Very Long</a></li>
    </ul>
</li>

#nav { 
height: 1; 
list-style-type: none; 
padding-top: 1.25em; 
margin-top: 0em;
}

#nav li { 
float: right; 
position: relative; padding: 0;
} 

#nav li a { 
display: block; 
font-size: 14px; 
padding: 0 1em;  
margin-bottom: 1em; 
color: #333; 
text-decoration: none; 
border-left: 1px solid #333; 
}

#nav .last, #nav li ul li a {
border-left: none;
}

#nav li a:hover, #nav li a:focus {
color: #666;
}

#nav li ul { 
opacity: 0; 
position: absolute; 
right: 0em; 
list-style-type: none; 
padding: 0; margin: 0; 
}

#nav li:hover ul { 
opacity: 1; 
}

#nav li ul li { 
float: none; 
position: static; 
width: auto; 
height: 0; 
line-height: 0; 
background: none; 
text-align: right; 
margin-bottom: .75em;
}

#nav li:hover ul li { 
height: 25px; 
line-height: 2.5em;
}

#nav li ul li a { 
background: #222; 
}

#nav li ul li a:hover { 
color: #666; 
}

推荐答案

您的#nav li样式适用于所有子li元素，所以你需要使用>，它只选择直接的孩子。

Your #nav li style is being applied to all child li elements, so you need to use the ">", which selects only the immediate child.

这里是更新的CSS，它修复了这个问题。我也评论了一些其他干扰CSS的CSS：

Here is updated CSS which fixes the problem. I also commented out some other CSS that was interfering:

#nav { 
    height: 1; 
    list-style-type: none; 
    padding-top: 1.25em; 
    margin-top: 0em;
}

#nav > li {  /* Added ">" */
    float: right; 
    position: relative;
    padding: 0;
} 

#nav li a { 
    display: inline-block; /* was block */ 
    font-size: 14px; 
    padding: 0 1em;  
    margin-bottom: 1em; 
    color: #333; 
    text-decoration: none; 
    border-left: 1px solid #333; 
}

#nav .last, #nav li ul li a {
    border-left: none;
}

#nav li a:hover, #nav li a:focus {
    color: #666;
}

#nav li ul { 
    opacity: 0; 
    /*position: absolute; 
    right: 0em; */
    list-style-type: none; 
    padding: 0; margin: 0; 
}

#nav li:hover ul { 
    opacity: 1; 
}

#nav li ul li { 
    /*float: none; 
    position: static; 
    width: auto;*/ 
    height: 0; 
    line-height: 0; 
    background: none; 
    text-align: right; 
    margin-bottom: .75em;
}

#nav li:hover ul li { 
    height: 25px; 
    line-height: 2.5em;
}

这篇关于具有自动列表项目宽度的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！