HTML & CSS - 似乎无法弄清楚为什么下拉菜单不起作用。

Question

我似乎无法使用最简单、最基本的下拉菜单。我在反复试验中学习。如果这很明显，我深表歉意！

这是 HTML：

<body>

<div class="drop">
<ul class="drop_menu">
<ul>
    <li><a href="main.html">Home</a></li>
    <li><a href="about.html">About</a></li>
        <ul>
            <li><a href="biography.html">Biography</a></li>
            <li><a href="statement.html">Statement</a></li>
            <li><a href="CV">CV</a></li> 
        </ul>

        <li><a href="gallery.html">New Work</a></li>
        <li><a href="archive.html">Archive</a></li>
        <li><a href="collaboration.html">collaboration</a></li>
        <li><a href="news.html">News</a></li>
</ul>
</ul>
</div>
</body>

CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline-block;
    width: 10em;
    height: 2em;
    line-height: 2em;
    position: relative;
    border-bottom: 2px solid #ccc;
}

ul li:hover {
    background-color: #ffa;
}

ul li ul {
    display: none;
    position: absolute;
    top: 2em;
    left: 0;
}

ul li:hover ul {
    display: block;
}

演示：http://jsfiddle.net/7env3ust/

我做错了什么？

Answer 1

您的 ul 实际上在您的 li 之外，因此它始终显示，请查看 fixed 示例。

它应该是这样的：

   <li><a href="about.html">About</a>
     <ul>
       <li><a href="biography.html">Biography</a>

       </li>
       <li><a href="statement.html">Statement</a>

       </li>
       <li><a href="CV">CV</a>

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

Answer 2

你的childul一定在li

里面

<li><a href="about.html">About</a>
    <ul>
        <li><a href="biography.html">Biography</a>

        </li>
        <li><a href="statement.html">Statement</a>

        </li>
        <li><a href="CV">CV</a>

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

演示

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline-block;
    width: 10em;
    height: 2em;
    line-height: 2em;
    position: relative;
    border-bottom: 2px solid #ccc;
}

ul li:hover {
    background-color: #ffa;
}

ul li ul {
    display: none;
    position: absolute;
    top: 2em;
    left: 0;
}

ul li:hover ul {
    display: block;
    background-color: red;
    z-index: 2;
}

<body>
    <div class="drop">
        <ul class="drop_menu">
                <li><a href="main.html">Home</a>

                </li>
                <li><a href="about.html">About</a>
                    <ul>
                        <li><a href="biography.html">Biography</a>

                        </li>
                        <li><a href="statement.html">Statement</a>

                        </li>
                        <li><a href="CV">CV</a>

                        </li>
                    </ul>
                </li>
                <li><a href="gallery.html">New Work</a>

                </li>
                <li><a href="archive.html">Archive</a>

                </li>
                <li><a href="collaboration.html">collaboration</a>

                </li>
                <li><a href="news.html">News</a>

                </li>
        </ul>
    </div>
</body>

Answer 3

对于嵌套列表，您的内部 <ul> 必须 inside a <li>.

<ul>
    <li><a href="main.html">Home</a></li>
    <li><a href="about.html">About</a>
        <ul>
            <li><a href="biography.html">Biography</a></li>
            <li><a href="statement.html">Statement</a></li>
            <li><a href="CV">CV</a></li> 
        </ul>
    </li>
    <li><a href="gallery.html">New Work</a></li>
    <li><a href="archive.html">Archive</a></li>
    <li><a href="collaboration.html">collaboration</a></li>
    <li><a href="news.html">News</a></li>
</ul>

有关详细信息，请参阅 this answer。

HTML & CSS - 似乎无法弄清楚为什么下拉菜单不起作用。

HTML & CSS - Can't seem to figure out why drop-down menu isn't working.

html

css

drop-down-menu