我似乎无法使用最简单、最基本的下拉菜单。我在反复试验中学习。如果这很明显，我深表歉意!
这是 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/
我做错了什么？
最佳答案
你的 child ul 必须在 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>关于HTML 和 CSS - 似乎无法弄清楚为什么下拉菜单不起作用。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33136860/