Question

我在这里要完成的是元素上的垂直下拉菜单，（ul）＆＃34; fav blogs＆＃34;。我试图调整css所以它只是垂直下降子菜单，＆＃34; rawrmerawr＆＃34;和＆＃34; realfriennds＆＃34;直接在＆＃34; fav博客＆＃34;元件。

无论我使用什么CSS，我都无法弄清楚我使用的是什么正确的代码。当我将鼠标悬停在＆＃34;那里的狗屎上时＃34;元素它正确地下降了另一个（ul - 无序列表），但当我徘徊在＆＃34; fav博客＆＃34;它没有这样做。

您可以实时查看导航栏here

查看HTML代码：

<nav>
<ul>
    <li><a href="#">There's some shit here </a>
        <ul>
            <li><a href="#">fav blogs </a></li>
                <ul>

                    <li><a href="http://rawrmerawr.tumblr.com/" target="_blank">sun&stars</a></li>
                    <li><a href="#" target="_blank">realfriennds</a></li>

                </ul>
            <li><a href="#">musicc</a></li>
            <li><a href="#">only me!!</a></li>
        </ul>
    </li>
</ul>

查看css代码：

nav {
position: fixed;
margin: 0 0 0 5px;
}

nav ul ul, ul ul ul li {
display: none;
}

nav ul li:hover > ul {
    display: block;
    margin: 0 0 0 10px;
}

nav ul ul ul li:hover > ul {
    display: block;
    margin: 0 0 20px 20px;
}

Answer 1

您的HTML结构不正确。子菜单的<ul>应嵌套在<li> fav blogs内，如下所示：

<nav>
<ul>
    <li><a href="#">There's some shit here </a>
        <ul>
            <li><a href="#">fav blogs </a>
                    <ul>
                    <li><a href="http://rawrmerawr.tumblr.com/" target="_blank">sun&stars</a></li>
                    <li><a href="#" target="_blank">realfriennds</a></li>
                    </ul>
            </li>
            <li><a href="#">musicc</a></li>
            <li><a href="#">only me!!</a></li>
        </ul>
    </li>
</ul>
</nav>

和这个CSS：

nav {
    position: fixed;
    margin: 0 0 0 5px;
}

nav>ul>li>ul>li:hover>ul {
        display: block;
        position: absolute;
        margin-left: 50px;
        margin-top: -12px;
}

nav>ul>li>ul {
        display: none;
}

nav>ul>li>ul>li>ul {
        display: none;
}

nav>ul>li:hover>ul {
        display: block;
        margin: 0 0 0 10px;
}

如何创建垂直下拉菜单

1 个答案: