Question

它是一个导航菜单，其中UL嵌套在父UL中。当鼠标悬停在父UL的LI（下图中的橙色）上时，嵌套的UL（下图中的绿色_应显示在LI的正下方。

＆＃13;

.clearer {
    clear: both;
}
body {
    font-family: sans-serif;
    font-size: 13px;
    margin: 0;
    padding: 0;
    position: relative;
    vertical-align: baseline;
}
div#header {
    background: none repeat scroll 0 0 #101816;
    float: left;
    height: 56px;
    margin: 0;
    padding: 0;
    width: 320px;
}
div#header-content-container {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 320px;
}
a#logo {
    background: blue;
    background-image: none;
    box-shadow: none;
    float: left;
    height: 38px;
    margin: 9px 0 0 6px;
    width: 238px;
}
#top-nav-container {
    margin: 0 0 0 264px;
    position: absolute !important;
}
nav {
    background-color: #3e4f4c;
    height: 56px;
    margin: 0;
    width: 56px;
}
nav a#menu_button {
    background: #3e4f4c;
    display: block;
    font-size: 30px;
    height: 56px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 56px;
}
nav ul {
    background: black repeat-y scroll 0 0 transparent;
    border-radius: 0;
    box-shadow: none;
    display: block;
    left: -184px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute !important;
    width: 240px;
}
nav ul li:first-child {
    border-top: medium none;
}
nav ul li:last-child {
    border-bottom: medium none;
}
nav ul li:last-child:hover {
    background: none repeat scroll 0 0 #3e4f4c;
}
nav ul li {
    background: #3e4f4c;
    border-bottom: 1px solid #191b1a;
    border-top: 1px solid #697774;
    display: block;
    float: none;
    height: 48px;
    margin: 0 0 0 10px;
    position: relative;
    text-align: left;
    width: 230px;
}
nav ul li a {
    color: #eee;
    display: block;
    font-size: 13px;
    padding: 16px 0 15px 15px;
    position: relative;
    text-decoration: none;
}
nav ul ul {
    background: black repeat-y scroll 0 0 transparent;
    border-radius: 0;
    box-shadow: none;
    display: none;
    left: -10px;
    list-style: outside none none;
    padding: 0;
    position: relative !important;
    top: 0;
    width: 240px;
}
nav ul li:first-child {
    border-top: medium none;
}
nav ul ul li {
    background: none repeat scroll 0 0 green;
    border-bottom: 1px solid red;
    display: block;
    float: none;
    height: 38px;
    margin: 0 0 0 10px;
    position: relative;
    text-align: left;
    width: 230px;
}
nav ul ul li a {
    color: #fff;
    display: block;
    padding: 0;
    position: relative;
    text-decoration: none;
}
nav ul li:hover a.top {
    background: #d8a900;
    color: black;
}
nav ul li:hover > ul {
    display: block;
}

＆＃13;

<body>
    <div id="header">
        <div id="header-content-container"> <a href="/" title="Logo" id="logo">Logo!</a>
            <div id="top-nav-container">
                <nav>
                    <a id="menu_button"></a>
                    <ul class="top">
                        <li>
                            <a class="top" href="/">HOME</a>
                        </li>
                        <li>
                            <a class="top" href="#">SERVICES</a>
                            <ul>
                                <li><a href="#">Item AAAAAAAAA</a>
                                </li>
                                <li><a href="#">Item AAAAAAAAAAAAAAA</a>
                                </li>
                                <li><a href="#">Item AAAAAAA</a>
                                </li>
                                <li><a href="#">Item AAAAAAAAA</a>
                                </li>
                                <li><a href="#">Item AAAAAAAAAAAAAAAA</a>
                                </li>
                                <li><a href="#">Item AAAAAAAAAAA</a>
                                </li>
                                <li><a href="#">Item AAAAAAAAAAAAAA</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a class="top" herf="#">LIBRARY</a>
                        </li>
                        <li>
                            <a class="top" href="#">CONTACT</a>
                            <ul>
                                <li><a href="#">Item BBBBBBBBBBBBB</a>
                                </li>
                                <li><a href="#">Item BBBBBBB</a>
                                </li>
                                <li><a href="#">Item BBBB</a>
                                </li>
                            </ul>
                        </li>
                        <li></li><!-- extra li for styling later -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div class="clearer"></div>
</body>

＆＃13;

This is an image of the wrong (current) and correct way should be displayed

Answer 1

问题是ht li的高度总是固定的。您需要在悬停时释放它，以便内部列表可以正确扩展。为此，只需添加一条规则height: auto：

nav ul li:hover {
    height: auto;
}
nav ul li:hover > ul {
    display: block;
}

演示： http://jsfiddle.net/cbavfv3j/5/

Answer 2

只需添加nav ul li { height: auto; } http://jsfiddle.net/cbavfv3j/4/

即可

但我喜欢 jQuery on click function 这种情况：）

CSS使父级UL的LI中的嵌套UL显示在父LI悬停的适当位置

2 个答案: