我的下拉菜单有问题：它不起作用。然而，我的菜单是。这些链接也无法正常工作，它们将我带到该页面，但不是该部分。如果我取出display: none下拉菜单 CSS，它会显示我的菜单，但不会显示为下拉菜单。我猜菜单已正确编码，但不知何故无法正确显示。<nav> <ul class="menu"> <li class="..."> <a href="...">...</a> </li> <li class="item"><a href="...">..</a></li> <div class="...."> <ul> <li><a href="...">...</a></li> <li><a href="....">..</a></li> <li><a href="..">...</a></li> <li><a href="...">...</a></li> </ul> </div> <li class="item"><a href="...">...</a></li> <li class="item"><a href="...">...</a></li> <li class="item"><a href="..">..</a></li> </ul></nav>
2 回答
POPMUISE
TA贡献1765条经验 获得超5个赞
在 内部添加 div 从语义上来说是不正确的ul。在子菜单所属的父li内添加子菜单。
nav {
width: 100%;
flex: 1;
}
nav ul {
display: flex;
flex-flow: row wrap;
list-style: none;
padding-top: 4%;
margin: 0;
}
nav ul li {
padding: 1em 4em;
}
nav ul li a {
text-decoration: none;
margin-right: auto;
color: #000;
font-size: 17px;
}
nav ul li a:hover {
border-bottom: 2px solid #724c20;
}
li.logo {
margin-right: auto;
}
.Submenu {
display: none;
}
nav ul li:hover .Submenu {
display: block;
background-color: #724c20;
position: absolute;
margin-top: 15px;
margin-left: -15px;
}
nav ul li:hover .Submenu ul {
display: block;
margin: 10px;
}
nav ul li:hover .Submenu ul li {
width: 150px;
padding: 10px;
border-bottom: 1px;
background: transparent;
border-radius: 0;
text-align: center;
}
nav ul li:hover .Submenu ul li:last-child {
border-bottom: none;
}
nav ul li:hover .Submenu ul li a:hover {
color: #d1b9a5;
}
<nav>
<ul class="menu">
<li class="logo">
<a href="..."><img src="..." class="logo" alt="..."></a>
</li>
<li class="item"><a href="...">..</a>
<div class="Submenu">
<ul>
<li><a href="..">..</a></li>
<li><a href="..">..</a></li>
<li><a href="..">..</a></li>
<li><a href="..">..</a></li>
</ul>
</div>
</li>
<li class="item"><a href="...">..</a></li>
<li class="item"><a href="...">..</a>
<div class="Submenu">
<ul>
<li><a href="..">..</a></li>
<li><a href="..">..</a></li>
<li><a href="..">..</a></li>
<li><a href="..">..</a></li>
<li><a href="..">..</a></li>
</ul>
</div>
</li>
<li class="item"><a href="..">..</a></li>
</ul>
</nav>
慕森王
TA贡献1777条经验 获得超3个赞
我使用 javascript 制作下拉菜单。选择下拉菜单display: none;。要显示下拉菜单，您必须执行某些操作，例如单击图标。所以你必须导入一个图标或添加一个按钮并使用javascript：
<script type="text/javascript">
$("*here comes your icon's/div's/button's id/class name you want*").click(function(){
$(".Submenu").toggleClass("active");
});
</script>
比你必须在 CSS 中编写 .Submenu 处于活动状态时会发生什么情况：
.Submenu.active {
display: block;
}
这是我上一个项目的示例：
<script type="text/javascript">
$(".menu-toggle-btn").click(function(){
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
如果你想，当你点击一个图标并且下拉菜单中的图标将更改为另一个图标时，你必须将其写入你的 javascript 脚本中： $(this).toggleClass("fa-times");。toggleClass("here comes your icons class name ");
如果您有任何其他问题，请随时询问。
添加回答
举报
0/150
提交
取消