html - 带下拉菜单的 CSS 中带下划线的菜单

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

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

ul li:hover ul{
  display:block;
}

See on jsfiddle

当然，您必须对示例进行风格化，但这不是重点。