CSS Multi Level DropDown菜单

时间：2013-07-01 14:52:23

标签： html css

我在下方创建了一个多级下拉菜单代码，但是存在问题（第二级无法正常工作）...

下面的HTML代码：

<nav>

<ul class="navigation">
    <li><a href="#">Services</a>
        <ul>
            <li><a href="#">SHARED HOSTING</a><span>WHM/Cpanel</span></li>
            <li><a href="#">EMAIL HOSTING</a><span>WEBMAIL</span></li>
            <li><a href="#">BLOG HOSTING</a><span>WHM/Cpanel</span></li>
            <li><a href="#">E-COMMERCE HOSTING</a><span>WHM/Cpanel</span></li>
            <li><a href="#">FILE STORAGE HOSTING</a><span>WHM/Cpanel</span></li>
            <li class="dropdown-submenu"><a href="#">RESELLER HOSTING</a><span>Private Nameservers</span>
                <ul class="dropdown-menu">
                    <li><a href="#">SHARED HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">EMAIL HOSTING</a><span>WEBMAIL</span></li>
                    <li><a href="#">BLOG HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">E-COMMERCE HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">FILE STORAGE HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">RESELLER HOSTING</a><span>Private Nameservers</span></li>
                </ul>
            </li>
        </ul>
    </li>
 </ul>



 <!-- DROPDOWN SELECT MENU FOR SMALL SCREENS -->      
  <div class="medium button dropdown" style="">
    Select
  <ul class="no-hover" style="top: 35px;">
  <li><a href="index-2.html"><strong>Home</strong></a></li>
  <li><a href="shared-hosting.html"><strong>Web Hosting</strong></a></li>
  <li><a href="shared-hosting.html">- Shared Hosting</a></li>
  <li><a href="reseller-hosting.html">- Reseller Hosting</a></li>
  <li><a href="vps.html"><strong>VPS</strong></a></li> <li><a href="dedicated-servers.html"><strong>Servers</strong></a></li>
  <li><a href="index-2.html"><strong>Features</strong></a></li>
  <li><a href="index-2.html">- Home Pricing Box</a></li>

  <li><a href="index-content-slider.html">- Home Content Slider</a></li>
  <li><a href="domain-names.html">- Domain Names</a></li>
  <li><a href="typography.html">- Typography</a></li>
  <li><a href="video-tutorials.html">- Video Tutorials</a></li>
  <li><a href="photo-gallery.html">- Photo Gallery</a></li>
  <li><a href="blog-category.html"><strong>Blog</strong></a>
  </li><li><a href="blog-category.html">- Category</a></li>
  <li><a href="blog-single-post.html">- Single Post</a></li>
  </ul>
  </div>
 <!-- END OF DROPDOWN SELECT MENU FOR SMALL SCREENS -->      
 </nav>

下面的CSS代码：

.navigation{ margin:0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;box-shadow: 0 0 14px 0px #e5e1e1; height:45px;  background: url(../images/backgrounds/menubg.png) repeat-x; border: 1px solid #e5e1e1;}
nav { position: relative; font-size:13px; margin: 0px auto; width: 100%;}
nav ul {list-style-type: none; padding:0; margin:0;}
nav ul li {float: left; position: relative;border-right:1px solid #e9e9e9; width:20% }
nav ul li.last {border-right:0;}
nav ul li a {text-align: center;display:block;text-decoration:none;padding: 12px 0;color:#2d2d2d;}
nav ul li a:hover { color:#d94a38; background: url(../images/arrow.png) no-repeat 0% 50%;}
nav ul li.active a { color:#d94a38; background: url(../images/arrow.png) no-repeat 0% 50%;}
nav ul li ul {display: none}
nav ul li:hover ul {display: block;position: absolute;list-style-type: none;margin:0;padding:0;z-index:999; background-color: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    padding: 3px 12px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #c12727;
    border-right-color: #dfdfdf;
    border-bottom-color: #dfdfdf;
    border-left-color: #dfdfdf;}
nav ul li:hover ul li {
    padding:8px 0;
    border-top: 1px solid #efefef;
    float: none;
    background: none;
    width:160px;
    border-right:0;}

nav ul li:hover ul li span{
    padding:0;
    margin:0;
    font-size:11px;
    color:#ccc;}    

nav ul li:hover ul li:first-child { border-top: none; } 
nav ul li:hover ul li a {color:#2d2d2d; font-size:12px; padding:0;  text-align: left;  background:transparent;}
nav ul li:hover ul li a:hover {color:#c12727; background:transparent;}
nav ul li.last:hover ul li {border-right:0;width: 95px;}
nav .dropdown {display: none;}

我尝试将以下代码添加到css但是muilti级别下拉菜单无法正常工作

.dropdown-submenu:hover > .dropdown-menu .dropdown-menu { display: none; }
.dropdown-submenu:hover .dropdown-submenu:hover > .dropdown-menu { display: block; }

1 个答案:

答案 0 :(得分：0)

试试这个：

.dropdown-submenu > .dropdown-menu { display:none; }
.dropdown-submenu:hover > .dropdown-menu { display:block; }

请参阅JSFiddle

修改 如果您希望它正确对齐，也请添加：

.dropdown-submenu > .dropdown-menu { 
    display:none;
    margin:9px 0 0 -13px;
}

编辑2 边距为1像素，因此打破了悬停事件。

编辑3

要将子菜单置于原始菜单的右侧，请使用以下CSS（请参阅here）：

.navigation{ margin:0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;box-shadow: 0 0 14px 0px #e5e1e1; height:45px;  background: url(../images/backgrounds/menubg.png) repeat-x; border: 1px solid #e5e1e1;}
nav { position: relative; font-size:13px; margin: 0px auto; width: 100%;}
nav ul {list-style-type: none; padding:0; margin:0;}
nav ul li {float: left; position: relative;border-right:1px solid #e9e9e9; width:20% }
nav ul li.last {border-right:0;}
nav ul li a {text-align: center;display:block;text-decoration:none;padding: 12px 0;color:#2d2d2d;}
nav ul li a:hover { color:#d94a38; background: url(../images/arrow.png) no-repeat 0% 50%;}
nav ul li.active a { color:#d94a38; background: url(../images/arrow.png) no-repeat 0% 50%;}
nav ul li ul {display: none}
nav ul li:hover ul {display: block;position: absolute;list-style-type: none;margin:0;padding:0;z-index:999; background-color: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    padding: 3px 0;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #c12727;
    border-right-color: #dfdfdf;
    border-bottom-color: #dfdfdf;
    border-left-color: #dfdfdf;}
nav ul li:hover ul li {
    padding:8px 13px;
    border-top: 1px solid #efefef;
    float: none;
    background: none;
    width:160px;
    border-right:0;}

nav ul li:hover ul li span{
    padding:0;
    margin:0;
    font-size:11px;
    color:#ccc;}    

nav ul li:hover ul li:first-child { border-top: none; } 
nav ul li:hover ul li a {color:#2d2d2d; font-size:12px; padding:0;  text-align: left;  background:transparent;}
nav ul li:hover ul li a:hover {color:#c12727; background:transparent;}
nav ul li.last:hover ul li {border-right:0;width: 95px;}
nav .dropdown {display: none;}

.dropdown-submenu > .dropdown-menu { 
   display:none;
   margin:-40px 0 0 173px;
}
.dropdown-submenu:hover > .dropdown-menu { display:block; }
相关问题
最新问题