Question

我有this菜单作为我网页的基础。但我想知道如何通过下拉菜单获取该菜单。我希望每个菜单类别下的其他选项卡在下划线下方下拉。

.container {
 width: 50%;
 margin: 0 auto;
}

ul li {
display: inline;
text-align: center;
}

a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #000;
}

.two:hover ~ hr {
margin-left: 25%;
}

.three:hover ~ hr {
margin-left: 50%;
}

.four:hover ~ hr {
margin-left: 75%;
}

hr {
height: .25rem;
width: 25%;
margin: 0;
background: #343434;
border: none;
transition: .3s ease;
}

Answer 1

您需要在菜单中添加子项。你里面基本上是一个ul。默认情况下，此ul不显示，当我们将鼠标悬停在父li上时，它将显示带有这样的选择器的ul：ul li：hover ul {}

ul li:hover ul{
  display:block;
}

See on jsfiddle

当然，你必须对这个例子进行风格化，但这不是重点。

CSS下划线菜单

1 个答案: