0

HTML、CSS、jQueryでメニューバーを作ろうとしています。それは機能しています。メインメニューにカーソルを合わせると、サブメニューが表示されます。しかし、マウスを最初のサブメニューを超えて下に移動しようとすると、消えてしまいます。JsFiddle を含めます。コードは次のとおりです。

HTML:

         <ul id="menu">
            <li><a href="#">Categories 1</a>
                <ul id="cat1">
                    <li class="first"><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
        </ul>

CSS:

#menu {
  background-color: #0000FF;
  height: 20px;
  padding: 15px 0 10px;
  margin: 5px;
  font: 12px Tahoma;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: inset 0px 0px 10px #000;
  text-align: center;
} 

#menu > li{
  display: inline;
}

li a {
  color: #fff;
  text-decoration: none;
}

.first{
  margin-top: 12px;
}

#cat1 > li{
  display: block;
  width: 150px; height: auto;
  margin-left: auto; margin-right: auto;
}

#cat1 > li > a{
  display:block;
  background-color: #0000FF;
  padding: 10px;
  box-shadow: inset 0px 0px 2px #000;
}

jQuery:

$('#cat1 > li > a').hide();
$('#menu > li > a').mouseenter(function(){
    $('#cat1 > li > a').slideDown('slow').css({display: 'block'});
});

$('#cat1 > li > a').mouseleave(function(){
    $('#cat1 > li > a').slideUp('slow').css({display: 'block'});
});

http://jsfiddle.net/ZfN7t/19/

助けてくれてありがとう！

4

1 に答える 1

0

私はいくつかのCSSを追加しました：

#menu > li {
  display: inline-block;
}

#cat1 {
  display:none;
}

#menu a:hover {
    color: #dc692e;
}

Javascriptを簡素化しました：

$('#menu > li').hover(function(){
    $('#cat1').slideDown('slow');
},function(){
    $('#cat1').stop().slideUp('slow');
});
于 2013-06-25T21:45:29.607 に答える