jquery,html和css的新手很抱歉,如果这看起来很简单。我正在使用jquery制作一个下拉菜单。我的链接不适用于下拉菜单,当下拉菜单向下滑动时,它会被切断并在一秒后加载?我按照教程,他们没有任何问题,但我收到了一吨。为什么我的链接不起作用?还有为什么下拉菜单会被切断?
Jquery的
<script type="text/javascript">
$(document).ready(function() {
$("#menu ul li").hover(function() {
$(this).find("ul").stop().slideToggle(400);
});
});
</script>
CSS
nav#menu {
float: right;
margin-right: 150px;
}
nav#menu #menu-nav {
margin: 0;
padding: 0;
}
nav#menu #menu-nav li {
list-style: none;
display: inline-block;
}
nav#menu #menu-nav ul li a{
margin-left: -60px;
background: black;
width: 250px;
}
nav#menu #menu-nav li a {
color: #DE5E60;
font-size: 18px;
font-weight: 300;
line-height: 60px;
display: block;
padding-right: 1cm;
text-transform: uppercase;
}
nav#menu #menu-mav ul ul li{
padding-right: 1cm;
}
nav#menu #menu-nav li a:hover {
color: #FFFFFF;
}
nav#menu ul ul{
position:absolute;
width:400px;
display:none;
}
nav#menu ul ul li{
display:block;
background:#252525;
}
HTML
<nav id="nav">
<nav id="menu">
<ul id="menu-nav">
<li><a href="#projects">Home</a>
<ul>
<li><a href="link.html">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3<a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#services">Services</a>
<ul>
<li><a href="link.html">Link 1</a></li>
<li><a href="link2.html/">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About Us</a></li>
</ul>
</nav>
</nav>
答案 0 :(得分:0)
在JSfiddle中试用此代码,您的代码正常运行,但我认为您希望在mouseout
$(document).ready(function() {
$("#menu ul li").on('mouseover',function() {
$(this).find("ul").stop().slideToggle(400);
});
$("#menu ul li").on('mouseout',function() {
$(this).find("ul").stop().slideToggle(400);
});
});
还要检查jQuery
标记中是否有head
。
答案 1 :(得分:0)
链接正在按预期工作。您没有关闭锚标记。下拉列表已给出 margin-left:-60px ,在暂停约1秒后呈现。
nav#menu #menu-nav ul li a{
//margin-left: -60px; This is causing the problem
background: black;
width: 250px;
}
检查FIDDLE。
答案 2 :(得分:0)
对于缓慢加载和截止,请尝试删除margin-left: -60px;
。