html - 无序列表(ul)内的css下拉菜单
问题描述
我想问你是否有任何方法可以在ul、li标签内的Services中插入下拉菜单?我知道如何添加下拉菜单,而不是使用 ul/li 我们使用按钮,但我想知道 ul/li 是否有任何其他方式,从那时起我必须重组 css ......所以你可能理解我!我会将代码放下,以便您快速浏览。非常感谢!
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="index.html" id="active">Home</a></li>
<li><a class="nav-link" href="#">Services</a></li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
解决方案
你可以这样做:
#nav {
list-style: none inside;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: block;
position: relative;
float: left;
background: #24af15;
/* menu background color */
}
#nav li a {
display: block;
padding: 0;
text-decoration: none;
width: 200px;
/* this is the width of the menu items */
line-height: 35px;
/* this is the hieght of the menu items */
color: #ffffff;
/* list item font color */
}
#nav li li a {
font-size: 80%;
}
/* smaller font size for sub menu items */
#nav li:hover {
background: #003f20;
}
/* highlights current hovered list item and the parent list items when hovering over sub menues */
#nav ul {
position: absolute;
padding: 0;
left: 0;
display: none;
/* hides sublists */
}
#nav li:hover ul ul {
display: none;
}
/* hides sub-sublists */
#nav li:hover ul {
display: block;
}
/* shows sublist on hover */
#nav li li:hover ul {
display: block;
/* shows sub-sublist on hover */
margin-left: 200px;
/* this should be the same width as the parent list item */
margin-top: -35px;
/* aligns top of sub menu with top of list item */
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Services-1</a></li>
<li><a href="#">Services-2</a></li>
<li><a href="#">SUB Services »</a>
<ul>
<li><a href="#">Sub Services 1</a>
<li><a href="#">Sub Services 2</a>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
推荐阅读
- excel - 如何加快隐藏行的 VBA 代码?
- python-3.x - 扩展 tf.io.gfile.GFile 超过 100MB/s 的吞吐量
- javascript - 如何保持从角度到nodejs的连接
- sas - 如何在 SAS Viya 上已上传的 CSV 上使用 infile 语句?
- reporting-services - 部署到不同的环境
- python - 通过 Python 脚本发送电子邮件时包含 Gmail 电子邮件签名
- c++ - 类函数的变量数量未知?C++
- python - 当我试图在 heroku 上部署我的应用程序时。出现错误“未检测到默认语言”
- python - 如何将一个列表拆分为多个列表?
- javascript - 带有列名数组和另一个带有值的数组的循环