html - 使用 CSS 在子菜单下拉菜单下创建子菜单
问题描述
在 CSS 中,此链接中有一个子菜单(Link 1、Link2、Link3)。https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
我正在尝试在上述子菜单下创建子菜单(链接 4.1、链接 4.2),如下图所示。我怎样才能得到这个子菜单。.
我在下面试过了。但这是重叠的。我是 CSS 的新手。请分享你的想法
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="dropdown">Link 1</div>
<div class="dropdown-content">
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
解决方案
这可以通过简单的 html/css 工作来完成,所以这里给出一个简单的例子:
ul {
list-style: none;
padding: 0;
margin: 0;
background: #000;
}
ul li {
display: block;
position: relative;
float: left;
background: #000;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #001;
}
li:hover>ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #000;
}
li:hover li a:hover {
background: #000;
}
ul ul ul {
left: 100%;
top: 0;
}
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">First level Menu</a>
<ul>
<li><a href="#">Second Level</a></li>
<li><a href="#">Second Level with third level</a>
<ul>
<li><a href="#">Third level</a></li>
<li><a href="#">Third level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
推荐阅读
- swift - Swfit如何用promise初始化一个变量?
- html - 在 Outlook Windows 中的表格元素中添加了额外的填充
- arrays - 如何在 C 中按字母顺序对指向字符 char** 的指针进行排序?
- java - 我可以使用优化实验在 Anylogic 中实现多目标优化问题吗?
- php - 如果排名不存在,laravel 在循环中添加数量
- sql - 生成删除查询
- html - 如何使用 scss mixin 将十六进制颜色代码转换为色调旋转
- assembly - x86 汇编编程(GAS 语法):如何将 2^32 - 1 的值放入 long
- html - 将焦点应用于元素
- excel - Excel - 3个数字之间的差异不是0