我正在尝试学习 HTML/CSS,在类(class)中我想创建一个基于 CSS 的下拉菜单导航栏。我阅读了几乎所有我能找到的教程并最终构建了它,但问题是它没有按预期工作,我让主菜单工作但列表没有显示。这是我的 HTML 的结构:
<div id="Header"/>
<div id="Navigation" >
<ul id="Menu-H">
<li id="HOME"><a href="#">HOME</a></li>
<li id="ITEMS"><a href="#">ITEMS</a></li>
<ul >
<li><a href="#">New Item</a></li>
<li><a href="#">Search Item</a></li>
</ul>
<li id="Category"><a href="#">CATALOG</a></li>
<li id="Inventory"><a href="#">INVENTORY</a></li>
</ul>
<a class="LogOutButton" href="#">LOG OUT</a>
这是我构建的 CSS:
#Menu-H {
padding: 0;
margin: 0;
list-style-type: none;
margin-left: 50px;
}
#Menu-H li {
float:left;
}
#Menu-H li:hover {
background: #f4f4f4;
border-radius: 5px 5px 0px 0px;
}
#Menu-H li a {
//border-left: 2px solid blue;
//border-right: 2px solid blue;
//background-color: white;
display:block;
padding: 5px 15px 5px 15px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF
}
#Menu-H li:hover a {
color: #161616;
text-shadow: 1px 1px 1px#FFFFFF;
}
/* Drop Down Menu.........*/
#Menu-H ul {
background: #161616;
background:rgba(255,255,255,0);
list-style: none;
display: none;
}
Menu-H ul li {
padding-top: 1px;;
float: none;
}
Menu-H li:hover ul {
display:block;
}
#Menu-H li:hover a {
background: #6b0c36;
}
#Menu-H li:hover ul li a:hover {
background: #333;
}
我找不到原因。
最佳答案
您的 HTML 不正确,您需要放置辅助 <ul>
在 parent 内部 <li>
<ul id="Menu-H">
<li id="HOME"><a href="#">HOME</a></li>
<li id="ITEMS"><a href="#">ITEMS</a>
<ul>
<li><a href="#">New Item</a></li>
<li><a href="#">Search Item</a></li>
</ul>
</li>
<li id="Category"><a href="#">CATALOG</a></li>
<li id="Inventory"><a href="#">INVENTORY</a></li>
</ul>
您还忘记添加 #
在两个 id-s 的 CSS 中。这是我制作的 fiddle ,您可以在其中看到我做了一些我正在谈论的更改并且它有效:
关于HTML 下拉菜单导航不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12995499/