Question

我遗漏了一些实现第三级css菜单的内容，

我的HTML是

<div class="menu">
 <ul>
  <li class="two"><a href="#" class="title"><span class="icon_has_child">Browse Products</span></a>
   <ul id="two_menu">
    <li><a href="#">Brand Directory</a>
     <ul>
      <li><a href="#">New Brand Directory 1</a></li>
      <li><a href="#">New Brand Directory 2</a></li>
     </ul>
    </li>
    <li><a href="#">Store Directory</a></li>
    <li><a href="#">New Arrival</a></li>
   </ul>
  </li>
 </ul>
</div>

和css是

.menu li.two{position:relative;}
.menu li.two #two_menu{ display:none;}
.menu li.two:hover #two_menu{ display:block;}

.menu li.two ul { width:190px; position:absolute; left:0; top:39px; padding-bottom:8px;}
.menu li.two ul li {background:none; float:none;}
.menu li.two ul li a { background:none; color:#606060; padding-left:31px; display:block;}
.menu li.two ul li a:hover { color:#f5f3f4; font-weight:bold; background-color:#001991;}

.menu li.two ul li ul { width:190px; position:absolute; left:191px; top:0px;  padding-bottom:8px;}

您可以在此处看到测试网站http://goo.gl/jZ3v0（在顶部菜单上点击“浏览产品”）

当悬停“品牌目录”时，我如何只显示“新品牌目录”？

Answer 1

执行此操作的一种方法是最初隐藏所有第三级菜单，然后在父级li悬停时显示它们：

.menu ul ul ul {
    display: none;
}

.menu li:hover > ul{
    display: block;
}

Answer 2

尝试此订单会对您有所帮助.. DEMO

DIV

<div class="menu">
    <nav>
 <ul>
  <li class="two"><a href="#" class="title"><span class="icon_has_child">Browse Products</span></a>
   <ul id="two_menu">
    <li><a href="#">Brand Directory</a>
     <ul>
      <li><a href="#">New Brand Directory 1</a></li>
      <li><a href="#">New Brand Directory 2</a></li>
     </ul>
    </li>
    <li><a href="#">Store Directory</a></li>
    <li><a href="#">New Arrival</a></li>
   </ul>
  </li>
 </ul>
    </nav>
</div>

<强> CSS

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    ;
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block; padding: 25px 40px;
            color: #757575; text-decoration: none;
        }


    nav ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none; 
            border-top: 1px solid #6b727c;
            border-bottom: 1px solid #575f6a; position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }   
                nav ul ul li a:hover {
                    background: #4b545f;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

Answer 3

尝试添加：

.menu li.two ul li ul li {display:none;}

后

.menu li.two ul li a { background:none; color:#606060; padding-left:31px; display:block;}

CSS第三级菜单

3 个答案: