jquery 下拉菜单链接不起作用并且 css

Question

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>

Answer 1

在 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);
   });     

 });

还要检查您的 head 标签中是否有 jQuery。

Answer 2

链接正常工作。你没有关闭锚标签。给出了下拉列表 margin-left:-60px，停顿1秒左右后渲染

nav#menu #menu-nav ul li a{
    //margin-left: -60px;    This is causing the problem
    background: black;
    width: 250px;
}

检查此 FIDDLE。

Answer 3

对于加载和截屏慢的问题，尝试去掉margin-left: -60px;。

jquery 下拉菜单链接不起作用并且 css

jquery drop down menu links dont work and css

html

css

jquery

drop-down-menu