0

第 3 レベルの 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でテスト サイトが表示されます(上部のメニューで [製品の参照] をクリックします)。

「ブランド ディレクトリ」にカーソルを合わせると「新しいブランド ディレクトリ」のみが表示される場合はどうすればよいですか?

4

3 に答える 3

1

これを行う 1 つの方法は、最初にすべての第 3 レベルのメニューを非表示にしてから、親の li にカーソルを合わせたときにそれらを表示することです。

.menu ul ul ul {
    display: none;
}

.menu li:hover > ul{
    display: block;
}
于 2013-07-13T04:23:02.463 に答える
0

この順序を試してみてください.. 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;
    }
于 2013-07-13T04:07:54.917 に答える
0

追加してみてください:

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

後

.menu li.two ul li a { background:none; color:#606060; padding-left:31px; display:block;}
于 2013-07-13T04:38:15.067 に答える