如何使用我的代码创建第三层菜单

编程问答 2022-11-06

问题描述

到目前为止，我的代码。我使用了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 (将#修改为@）

menu