【发布时间】：2021-12-15 11:53:21
【问题描述】：
我在导航栏中有一个不错的下拉菜单。我想为其添加第二级，以便第二级菜单选项从当前下拉选项的右侧弹出。很久以前在网上找到了这个的代码，忘记在哪里了。。我没有足够的CSS经验来解决它。
HTML 代码 - 为简洁起见仅显示一个菜单：
<table border=0 align=center width=900>
<tr>
<td>
<header class="site-header-wrap">
</header>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix menu">
<!-- NETWORK -->
<li><a href="#">NETWORK<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="client.shtml" target="_top">BY CLIENT</a></li>
<li><a href="firew.shtml" target="_top">BY FIREWALL</a></li>
<li><a href="sw.shtml" target="_top">BY SWITCH</a></li>
<li><a href="rtr" target="_top">BY ROUTER</a></li>
<li><a href="int.shtml" target="_top">ROUTER INTERFACES</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</td>
</tr>
</table>
CSS 代码：
.clearfix:after {
display:block;
clear:both;
content:'';
}
a, a:visited, a:active
{
font-family: arial, verdana;
color: #003333;
font-size: 11px;
text-decoration: underline;
}
a:hover
{
#color: #666666;
color: #534F85;
text-decoration: underline;
}
/*This is for the color of nav panel */
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:1px 1px 3px rgba(0,0,0,0.2);
background:#282467;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #7E2F86, #282467, #B2377E, #282467, #282467, #B2377E, #282467, #7E2F86, rgba(0, 0, 0, 0));
}
.menu {
width:900px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
/*----- font-family:'Ek Mukta'; -----*/
}
.menu a {
transition:all linear 0.15s;
color:#ffffff;
text-decoration:none;
font-weight:bold;
}
/*This is for the hover text color in the nav panel */
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#A9A7C2;
font-weight:bold;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:12px;
text-decoration:none;
font-family:trebuchet ms,arial,helvetica,sans-serif;
font-weight:bold;
white-space: nowrap;
}
.menu > ul > li > a {
padding:20px 11px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#3D3976;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:190%;
padding:2px 6px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#534F85;
}
.sub-menu li {
display:block;
font-size:14px;
}
.sub-menu li a {
padding:3px 15px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#282467;
}
例如，我想在防火墙选项下为防火墙类型添加 2 个子菜单，cisco 和 paloalto。我试过这个：
<li><a href="firew.shtml" target="_top">BY FIREWALL</a>
<ul>
<li><a href="cisco.shtml" target="_top">CISCO</a></li>
<li><a href="pa.shtml" target="_top">PALOALTO</a></li>
<ul>
<li>
当然不行。我是否需要另一堂课，说诸如 second-level-menu 之类的东西？如果有，那是什么样的？
【问题讨论】：