1

私は過去に無数のjQueryドロップダウンメニューを作成しました。ほとんどの場合、試行錯誤が少しありますが、今回はメニューの内容を何を変更しても表示されたままになります。どんな助けでも大歓迎です。

これが私のhtmlです：

   <nav>
        <ul>
            <li>Content Management (CMS)
                <ul>
                    <li><a class="a1" href="#">Catalog</a></li>
                    <li><a class="a1" href="#">Images</a></li>
                </ul>
            </li>
            <li>Developer
                <ul>
                    <li><a class="a1" href="#">Pages</a></li>
                    <li><a class="a1" href="#">Static Blocks</a></li>
                </ul>
            </li>
            <li>Tools
                <ul>
                    <li><a class="a1" href="#">Analytics <i>BETA</i></a></li>
                </ul>
            </li>
        </ul>
    </nav>

CSS：

nav {position:absolute; margin-top:-20px;}
nav ul{text-align:left; list-style-type:none; }
nav ul li {float:left; background:#FFF; width:250px;}
nav ul li:hover {background:#FFF; border:2px solid #b1953a;}
nav ul li a {display:block; width:200px; font-size:14px;}
nav ul li ul {position:absolute; width:50px; padding:2px;}
nav ul li ul li{background:#FFF; border-left:2px solid #ccc; padding:5px;}

そしてjQuery：

 $('nav li ul').hide();
 $('nav li').hover(
  function () {
   $('ul', this).stop().slideDown(100);
  },function () {
   $('ul', this).stop().slideUp(100);
  });
4

1 に答える 1

1

$('nav li ul').hide();CSSで行うnav ul li ul {display:none;}

また、そのjQueryセレクターで「ul」タグを見逃していました。

私のために働く：http：//jsfiddle.net/4kqRv/

あなたは実際にCSSでドロップダウンを実際に行うことができます。

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

それほど良くはありませんが、機能します：http: //jsfiddle.net/WRGJS/

于 2013-03-15T15:23:41.123 に答える