此代码似乎可以正确显示所有内容，但在浏览器中启动时，下拉菜单不起作用。悬停样式和除下拉菜单外的所有内容均正常工作。 谢谢。
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GS4 Concept Home Page</title>
<link type="text/css" href="unicss.css" rel="stylesheet"/>
<script src="Script/main.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="header">
<div class="nav">
<ul class="navigation">
<li><a href="#">Main Cat 1</a></li>
<li><a href="#">Main Cat 2 </a></li>
<ul>
<li><a href="#">Sub Cat 2-1</a></li>
<li><a href="#">Sub Cat 2-2</a></li>
<li><a href="#">Sub Cat 2-3</a></li>
<li><a href="#">Sub Cat 2-4</a></li>
<li><a href="#">Sub Cat 2-5</a></li>
</ul>
<li><a href="#">Main Cat 3 </a></li>
<ul>
<li><a href="#">Sub Cat 3-1</a></li>
<li><a href="#">Sub Cat 3-2</a></li>
<li><a href="#">Sub Cat 3-3</a></li>
<li><a href="#">Sub Cat 3-4</a></li>
<li><a href="#">Sub Cat 3-5</a></li>
<li><a href="#">Sub Cat 3-6</a></li>
<li><a href="#">Sub Cat 3-7</a></li>
</ul>
</ul>
</div>
</div>
<div id="container">
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body{
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}
#header{
background-color:#474747;
width:100%;
display:block;
}
#container{
margin:auto;
width:70%;
}
.navigation {
margin:0;
padding:0;
list-style:none;
}
.navigation li {
float:left;
width:150px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}
JavaScript:
$(document).ready(function() {
$('.navigation li').hover(
function() {
$('ul', this).fadeIn();
}, function() {
$('ul', this).fadeOut();
});
});
最佳答案
您的脚本顺序错误。
代替
<script src="Script/main.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
试试这个:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script src="Script/main.js"></script>
同时制作一个嵌套列表，以便您的选择器在 main.js 文件中是正确的:
<ul class="navigation">
<li><a href="#">Main Cat 1</a></li>
<li><a href="#">Main Cat 2 </a>
<ul>
<li><a href="#">Sub Cat 2-1</a></li>
<li><a href="#">Sub Cat 2-2</a></li>
<li><a href="#">Sub Cat 2-3</a></li>
<li><a href="#">Sub Cat 2-4</a></li>
<li><a href="#">Sub Cat 2-5</a></li>
</ul>
</li>
<li><a href="#">Main Cat 3 </a>
<ul>
<li><a href="#">Sub Cat 3-1</a></li>
<li><a href="#">Sub Cat 3-2</a></li>
<li><a href="#">Sub Cat 3-3</a></li>
<li><a href="#">Sub Cat 3-4</a></li>
<li><a href="#">Sub Cat 3-5</a></li>
<li><a href="#">Sub Cat 3-6</a></li>
<li><a href="#">Sub Cat 3-7</a></li>
</ul>
</li>
</ul>
关于javascript - 为什么这个 jquery 下拉菜单不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22748596/