代码之家 › 专栏 › 技术社区 › Roger McCarrick

将第二级添加到现有导航栏下拉菜单

css html

Roger McCarrick · 技术社区 · 4 年前

我在导航栏里有一个不错的下拉菜单。我想给它添加第二级,这样第二级菜单选项就会从当前下拉选项的右侧弹出。我很久以前在网上找到了这个的代码,忘了在哪里了。。我没有足够的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">&#9660;</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;
}

例如,我想在防火墙类型的FIREWALL选项下添加两个子菜单,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>

当然不行。我还需要另一节课吗,比如说二级菜单之类的?如果是,那看起来是什么样子?

1 回复 | 直到 4 年前

Sakthi Bala K.S 4 年前

例如

在CSS中:

a {
    color: #FFF;
}


nav {
    margin: 50px 0;
    background-color: #E64A19;
}

nav ul {
    padding: 0;
  margin: 0;
    list-style: none;
    position: relative;
    }
    
nav ul li {
    display:inline-block;
    background-color: #E64A19;
    }

nav a {
    display:block;
    padding:0 10px; 
    color:#FFF;
    font-size:20px;
    line-height: 60px;
    text-decoration:none;
}

nav a:hover { 
    background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
    display: none;
    position: absolute; 
    top: 60px; /* the height of the main nav */
}
    
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
}
    
/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

/* Second, Third and more Tiers */
nav ul ul ul li {
    position: relative;
    top:-60px; 
    left:170px;
}

    
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

在Html中:

<nav>
    <ul>
        <li><a href="#">What is it?</a></li>
        <li>
            <a href="#">Inventory</a>
            <ul>
                <li>
                    <a href="#">X-box 360</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decorations</a></li>
                        <li><a href="#">Redstone &amp; Transportation</a></li>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Tools, Weapons &amp; Armor</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">PC</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decoration Blocks</a></li>
                        <li><a href="#">Redstone</a></li>
                        <li><a href="#">Transportation</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                        <li><a href="#">Foodstuff</a></li>
                        <li><a href="#">Tools</a></li>
                        <li><a href="#">Combat</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Materials</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Mobile</a>
                    <ul>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Tools &amp;amp; Weapons</a></li>
                        <li><a href="#">Decoration Blocks</a></li>
                        <li><a href="#">Building Blocks</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">PS4</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decorations</a></li>
                        <li><a href="#">Redstone &amp; Transportation</a></li>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Tools, Weapons &amp; Armor</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>