Question

我有一个关于我的下拉菜单的问题，它不会下降，我在这里搜索了stackoverflow（这对其他东西有很大的帮助）但是我找不到问题。有

这是我的HTML代码：p.s我在html代码中使用

<ul>

    <li><a href="radio.html">Radio</a></li>

        <ul>

            <li><a href="web.html">Webradio</a></li>
            <li><a href="win.html">Winacties</a></li>

        </ul>

    <li><a href="playlist.html">Playlists</a></li>

        <ul>

            <li><a href="vandaag.html">Playslist van vandaag</a></li>
            <li><a href="win.html">Playlist van de week</a></li>

        </ul>

    <li><a href="nummer.html">Welk nummer was dat?</a></li>
        <ul>

            <li><a href="welke.html">Nummers van vandaag</a></li>

        </ul>
    <li><a href="over.html">Over ons</a></li>

        <ul>

            <li><a href="wie.html">Wie zijn wij</a></li>

        </ul>
</ul>

这是我的css代码：

nav ul ul{ display: none; }

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

nav ul {
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;  
list-style: none;
position: relative;
display: inline-table; }

nav ul:after {content: ""; clear: both; display: block; }

nav ul li {float: left; }

nav ul li:hover {background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); }

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

nav ul li a {display: block; padding: 25px 40px;
    color: #757575; text-decoration: none; }

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%; }

nav ul ul li {float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative; }

nav ul ul li a {padding: 15px 40px;
        color: #fff; }  

nav ul ul li a:hover{background: #4b545f; }

nav ul ul ul { position: absolute; left: 100%; top:0; }

那么我的代码有什么问题？我需要改变什么吗？我的代码错了吗？它是什么???

请帮助我，因为我真的需要它如果你们帮助我，那真的会有所帮助：）

Answer 1

在关闭子菜单li之前，您要关闭顶级菜单项的父ul代码，然后更改您的HTML：

Demo Fiddle

<nav>
    <ul>
        <li><a href="radio.html">Radio</a>    
            <--! closing li should NOT be here -->
            <ul>
                <li><a href="web.html">Webradio</a>

                </li>
                <li><a href="win.html">Winacties</a>

                </li>
            </ul>
        </li> <--! closing li should be here -->
        <li><a href="playlist.html">Playlists</a>

            <ul>
                <li><a href="vandaag.html">Playslist van vandaag</a>

                </li>
                <li><a href="win.html">Playlist van de week</a>

                </li>
            </ul>
        </li>
        <li><a href="nummer.html">Welk nummer was dat?</a>

            <ul>
                <li><a href="welke.html">Nummers van vandaag</a>

                </li>
            </ul>
        </li>
        <li><a href="over.html">Over ons</a>

            <ul>
                <li><a href="wie.html">Wie zijn wij</a>

                </li>
            </ul>
        </li>
    </ul>
</nav>

如您所知，您使用的是无效的HTML，li内的ul个孩子之外不会显示任何内容。

Answer 2

问题出在你的HTML中，这个：

<li><a href="radio.html">Radio</a></li>

<ul>

    <li><a href="web.html">Webradio</a></li>
    <li><a href="win.html">Winacties</a></li>

</ul>

应该是：

<li><a href="radio.html">Radio</a>

    <ul>

        <li><a href="web.html">Webradio</a></li>
        <li><a href="win.html">Winacties</a></li>

    </ul>
</li>

注意第一行li是如何关闭的？

然后您可以显示子菜单：

li:hover ul {display: block;}

我有一个下拉菜单，但我的菜单不会下拉

2 个答案:

Demo Fiddle