最佳答案
我们来了!
下拉菜单可以使用嵌套的“ul”、绝对位置,并且我们将从 display: none;
更改为 display:block;
需要悬停。
类似这样的事情:
<ul>
<li><a href="#">…</a>
<ul>
<li><a href="#">…</a>
<ul> … <!-- And so on. -->
</ul>
</li>
<li>
</ul>
您的示例的 html
<nav id="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">Project 1</a>
<ul>
<li><a href="#">Project 2</a>
<ul>
<li><a href="#">Project 3</a>
<ul>
<li><a href="#">Project 4</a>
<ul>
<li><a href="#">Project 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
你的explame的SCSS:(我使用了sass,因为它更容易阅读和编写,但我也会在下面粘贴CSS)
#main-nav{
ul{ /* Those lines are used only for styling */
margin: 0;
padding: 0;
border-right: 1px solid black;
width: 150px;
list-style-type: none;
li{
position: relative; /* This is important when using absolute positions. */
&:hover{
&:before{ /* arrow styles */
content: "";
top: 0;
bottom: 0;
right: 0;
border-top: 5px solid transparent;
border-right: 5px solid #999;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
height: 0px;
width: 0px;
margin: auto;
}
> ul{
display: block; /* IMPORTANT: This will show your dropdown menus when hover in the parent li. */
/*&:before { // I don't like this part but if you enable it, it will make child ul's look closer to your design.
content: "";
position: absolute;
right: 0;
top: -65px;
bottom: -35px;
width: 1px;
background-color: #ccc;
}*/
}
}//:hover
a{ /* Those lines are used only for styling */
padding: 7px 10px;
display: block;
&:hover{
color: red;
}
}// a
> ul{ /* This is what makes the magic happen. */
display: none; /* Dropdown menus are always hidden, except when you hover it's li parent */
position: absolute; /* This will position the ul */
top: 0;
left: 100%; /* This will push the ul where it is needed. */
border-right: 1px solid #ccc;
}
}// li
}// ul
}
实例:https://jsfiddle.net/xwazzo/3spxxk1z/
以及 promise 的 CSS 版本:
#main-nav ul {
margin: 0;
padding: 0;
border-right: 1px solid black;
width: 150px;
list-style-type: none;
}
#main-nav ul li { position: relative; }
#main-nav ul li:hover:before {
content: "";
top: 0;
bottom: 0;
right: 0;
border-top: 5px solid transparent;
border-right: 5px solid #999;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
height: 0px;
width: 0px;
margin: auto;
}
#main-nav ul li:hover > ul { display: block; }
#main-nav ul li a {
padding: 7px 10px;
display: block;
}
#main-nav ul li a:hover { color: red; }
#main-nav ul li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
border-right: 1px solid #ccc;
}
关于css - 使用 bootstrap 的垂直主菜单的水平子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36349002/