jQuery:菜单栏中的奇怪行为
jQuery:菜单栏中的奇怪行为
提问于 2013-06-26 04:49:29
我正在尝试做一个菜单栏与超文本标记语言，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/
谢谢你的帮助！
回答 1
Stack Overflow用户
发布于 2013-06-26 05:45:30
我添加了一些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');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17307258
复制相关文章
相似问题
腾讯云开发者
