CSS 垂直多级下拉菜单问题
[英]CSS vertical multi level dropdown menu issue
问题描述
我想做一个导航菜单，有几个下拉菜单。 （我开始工作了）现在我想在下拉菜单 1 中放置另一个子菜单下拉菜单。但我似乎无法让它工作。 我该怎么做才能使子菜单 1 表现得像下拉菜单 1？ 我想制作嵌套下拉菜单，就像一个 3 级下拉菜单。
感谢您的时间。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical Drop-Down Navigation using HTML & CSS</title>
<style type="text/css">
* {padding:0; margin:0;}
a {text-decoration: none;}
li {list-style: none;}
/* Navigation STyling */
.main-nav {width: 250px; background: #033677;}
.main-nav a {
text-transform: uppercase;
letter-spacing: .2em;
color: #FFF;
display: block;
padding: 10px 0 10px 20px;
border-bottom: 1px dotted red;
}
.main-nav a:hover {background: #C71E54;}
.sub-nav-ul ul {display: none;}
.sub-nav-ul li:hover ul {display: block;}
.main-nav-ul ul {display: none;}
.main-nav-ul li:hover ul {display: block;}
.main-nav-ul ul a:before {
content: '\203A';
margin-right: 20px;
}
.main-nav .sub-arrow:after {
content: '\203A';
float: right;
margin-right: 20px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.main-nav li:hover .sub-arrow:after {
content: '\2039';
}
</style>
</head>
<body>
<nav class="main-nav">
<ul class="main-nav-ul">
<li><a href="#">Home</a></li>
<li><a href="#">DropDown 1<span class="sub-arrow"></span></a>
<ul>
<ul class="sub-nav-ul">
<li><a href="#">SUB Menu 1<span class="sub-arrow"></span></a>
<ul>
<li><a href="#">Sub Item 1X</a></li>
<li><a href="#">Sub Item 2X</a></li>
<li><a href="#">Sub Item 3X</a></li>
<li><a href="#">Sub Item 4X</a></li>
</ul>
</li>
</ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
<li><a href="#">LINK 1</a></li>
<li><a href="#">Dropdown 2<span class="sub-arrow"></span></a>
<ul>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
</ul></li>
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>
</ul>
</nav>
</body>
</html>
2 个解决方案
解决方案1
2 已采纳 2020-02-20 23:47:11
将子组合器>选择器添加到您的代码中，以特定于后代级别。
.main-nav-ul > li > ul {display: none;}
.main-nav-ul li:hover > ul {display: block;}
.sub-nav-ul > li > ul {display: none;}
.sub-nav-ul li:hover > ul {display: block;}
现在，当你将鼠标悬停在.main-nav-ul li ，你申请的block式的所有ul嵌套内的元素.main-nav-ul ，其中包括所有ul元素嵌套在.sub-nav-ul列表也是如此。 使用>选择器仅适用于直接后代，因此当您将鼠标悬停在父.main-nav-ul li时，不会影响那些进一步嵌套在其他元素中的元素。 然后将.sub-nav-ul li悬停在.sub-nav-ul li也将仅适用于它自己的直接后代。
这是完整的工作代码：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Vertical Drop-Down Navigation using HTML & CSS</title> <style type="text/css"> * {padding:0; margin:0;} a {text-decoration: none;} li {list-style: none;} /* Navigation STyling */ .main-nav {width: 250px; background: #033677;} .main-nav a { text-transform: uppercase; letter-spacing: .2em; color: #FFF; display: block; padding: 10px 0 10px 20px; border-bottom: 1px dotted red; } .main-nav a:hover {background: #C71E54;} .main-nav-ul > li > ul {display: none;} .main-nav-ul li:hover > ul {display: block;} .sub-nav-ul > li > ul {display: none;} .sub-nav-ul li:hover > ul {display: block;} .main-nav-ul ul a:before { content: '\\203A'; margin-right: 20px; } .main-nav .sub-arrow:after { content: '\\203A'; float: right; margin-right: 20px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); } .main-nav li:hover .sub-arrow:after { content: '\\2039'; } </style> </head> <body> <nav class="main-nav"> <ul class="main-nav-ul"> <li><a href="#">Home</a></li> <li><a href="#">DropDown 1<span class="sub-arrow"></span></a> <ul class="level1"> <ul class="sub-nav-ul"> <li><a href="#">SUB Menu 1<span class="sub-arrow"></span></a> <ul class="level2"> <li><a href="#">Sub Item 1X</a></li> <li><a href="#">Sub Item 2X</a></li> <li><a href="#">Sub Item 3X</a></li> <li><a href="#">Sub Item 4X</a></li> </ul> </li> </ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </li> <li><a href="#">LINK 1</a></li> <li><a href="#">Dropdown 2<span class="sub-arrow"></span></a> <ul> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> <li><a href="#">Item 7</a></li> <li><a href="#">Item 8</a></li> </ul></li> <li><a href="#">LINK 2</a></li> <li><a href="#">LINK 3</a></li> </ul> </nav> </body> </html>
解决方案2
1 2020-02-21 06:29:02
CSS多级下拉菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.