如何解决如何使用我的代码创建第三层菜单
到目前为止,我的代码。我使用了W3学校的导航
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
如果可能的话,我想对此进行扩展以创建一个3级菜单,同时还要响应移动设备。我已经在HTML中添加了第3级,但我不知该如何添加CSS和其他必要的编码。
感谢您的帮助
a.top{
text-decoration:none;
padding:0px;
color: white;
background-color:#333;
border:1px solid #333;
}
a.top:hover,.dropdown:hover{border:1px solid #f2bf54;}
.topnav {
overflow: hidden;
background-color: #333;
width:100%;
border-top:2px solid #f2bf54;
border-bottom:2px solid #f2bf54;
padding:4px 0px;
}
.topnav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 10px 5px;
text-decoration: none;
font-size: 14px;
min-width:110px;
border-radius:0px;
}
@media screen and (max-width: 800px) {
.topnav a {padding: 5px 5px;}
}
.active {
background-color: #000;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;border:1px solid #333;
}
.dropdown .dropbtn {
font-size: 14px;
border: none;
outline: none;
color: #fff;
padding: 10px 5px;
background-color: inherit;
font-family: inherit;
margin: 0;min-width: 130px;border-radius:0px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 170px;
box-shadow: 0px 8px 16px 0px rgba(0,0.7);border-top:8px solid rgba(255,255,.0);
z-index: 1000;
}
.dropdown-content a {
float: none;
background-color: #f9f9f9;
color: black;
padding: 6px 10px;
text-decoration: none;border-radius:0px;
display: block;
text-align: left;border-left:7px solid #555;
}
.topnav a:hover,.dropdown:hover .dropbtn {
background-color: #555;
color:#f2bf54;
}
.dropdown-content a:hover {
background-color: #eee;
color: black;border-left:7px solid #f2bf54;border-radius:0px;
}
.dropdown:hover .dropdown-content { display: block; }
@media screen and (max-width: 800px) {
.topnav a:not(:first-child),.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 800px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {position: absolute; right: 0; top: 0; }
}
.topnav.responsive a { float: none; display: block; text-align: left; }
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn { display: block; width: 100%;text-align: left; }
img.hamburger{ float:right; font-size:14px; width:67px;}
<div class="topnav" id="myTopnav">
<a href="index.html" class="top">Level 1</a>
<div class="dropdown">
<button class="dropbtn">Level 1</button>
<div class="dropdown-content">
<a href="#">Level 2</a>
<a href="#">Level 2</a>
<a href="#">Level 3</a>
<a href="#">Level 3</a>
<a href="#">Level 2</a>
<a href="#">Level 2</a>
<a href="#">Level 2</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Level 1</button>
<div class="dropdown-content">
<a href="#">Level 2</a>
<a href="#">Level 2</a>
<a href="#">Level 3</a>
<a href="#">Level 3</a>
<a href="#">Level 2</a>
</div>
</div>
<a href="#" class="top">Level 1</a>
<a href="#" class="top">Level 1</a>
<div class="dropdown">
<button class="dropbtn">Level 1</button>
<div class="dropdown-content">
<a href="#">Level 2</a>
<a href="#">Level 2</a>
</div>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><img src="icon-hamburger.png"
class="hamburger" /></a>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。