使下拉菜单具有灵活的宽度

Question

是否可以使#navbar > li > ul具有灵活的宽度（因此根据文字调整大小）而不是从父width继承#navbar > li？

#navbar li {
    list-style: none;
    position: relative;
    display: inline-block;
    margin: 0 1em 0 0;
    padding: 0 0 1em;
}
#navbar li ul {
    display: none;
    padding: 0;
    margin: 0;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 1.5em;
}
#navbar li li {
    margin: .5em;
    padding: 0;
    display: block;
}
#navbar > li:hover > ul {
    display: block;
}

<ul id="navbar">
    <li>
        <a href="#">Item A</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item B</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
</ul>

Answer 1

检查此代码

#navbar{
    position: relative;
    width: 500px;
    background: #f5f5f5;
}
#navbar li {
    list-style: none;
    display: inline-block;
}

#navbar li ul { /* possible full width? */
    display: none;
    padding: 0;
    margin: 0;
    background: #ccc;
    position: absolute;
    left: 0;
    right: 0;

}

#navbar li li {
    padding: 0;
}

#navbar > li:hover > ul {
    display: block;

}
#navbar a{
    color: #000;
    text-decoration: none;
    display: block;
    padding: 5px 10px;
}
#navbar a:hover{color#333;}

<ul id="navbar">
    <li>
        <a href="#">Item A</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item B</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
</ul>

Answer 2

制作内部UL white-space: nowrap;并将内部LI设置为display: block：

＆＃13;

＆＃13;

#navbar li {
    list-style: none;
    position: relative;
    display: inline-block;
    margin: 0 1em 0 0;
    padding: 0 0 1em;
}

#navbar li ul {
    display: none;
    padding: 0;
    margin: 0;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 1.5em;
}

#navbar li li {
    margin: .5em 1em .5em 0;
    padding: 0;
}

#navbar > li:hover > ul {
    white-space: nowrap;
    display: block;
}

#navbar > li:hover > ul li {
    display: block;
}

＆＃13;

<ul id="navbar">
    <li>
        <a href="#">Item A</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item B</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

有可能，只需像这样改变你的CSS

#navbar {
    position: relative;
}

#navbar li {
    list-style: none;
    display: inline-block;
    margin: 0 1em 0 0;
    padding: 0 0 1em;
}

#navbar li ul { /* possible full width? */
    display: none;
    padding: 0;
    margin: 0;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 1.5em;
    width: 100%;
}

#navbar li li {
    margin: .5em 1em .5em 0;
    padding: 0;
    display: block;
}

#navbar > li:hover > ul {
    display: block;
}

http://jsfiddle.net/Lqnz1wme/

Answer 4

这样的事情？ http://jsfiddle.net/fa94a5oo/3/

#navbar li {
    padding: 10px;
    width: 75px;
}

Answer 5

只需将空白属性添加到#navbar li li:

即可

#navbar li li {
    margin: .5em 1em .5em 0;
    padding: 0;
    display: block;
    white-space: nowrap;
}