html - CSS 多级下拉菜单

Question

我在下面创建了一个多级下拉菜单代码但是有一个问题(第二级不能正常工作)...

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，但是多级下拉菜单不起作用

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

Answer 1

试试这个:

.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; }