所以我的jquery下降了，我无法弄清楚原因。我很确定这很简单。下面是我的HTML代码和CSS。这应该是一个水平导航栏，当你悬停/点击它时，它有一个带有子主题的下拉列表。但是，目前一切正常但下拉部分。 JSFiddle
HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Geeky Chic Girls - Home</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/responsiveslides.min.js"></script>
<link href="css/responsiveslides.css" rel="stylesheet" type="text/css" />
<link href="css/gcg2.css" rel="stylesheet" type="text/css" />
<script>
$(function(){
$("ul.rslides").responsiveSlides();
});
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(
function() {},
function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
}
);
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(
function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
}
);
});
</script>
</head>
<body>
<center>
<div id="container">
<div id="header">
<img src="Images/logo.png">
</div>
<div class="navigationbar">
<ul class="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Products</a>
<ul class="subnav">
<li><a href="#">Soap</a></li>
<li><a href="#">Lotion</a></li>
</ul>
</li>
<li>
<a href="#">Social</a>
<ul class="subnav">
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</center>
</body>
</html>
<!-- end .sidebar1 --></div>
CSS：
body,td,th {
color: #FFF;
}
body {
background-color: #000;
}
#container {
width:80%;
height:100%;
background-color:#0F0;
border-width:medium;
border:#FFF;
margin: 0 auto;
overflow: hidden;
}
#header {
background-color:#F00;
border-width:medium;
border-color:#FFF;
}
#header img{
width:auto\9;
max-width:100%;
}
ul.nav {
list-style: none;
width:auto\9;
max-width:100%;
}
ul.nav li {
display: inline-block;
float:none;
padding: 0;
margin:0;
border-right: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited {
padding: 10px 20px 10px 20px;
display: block;
text-decoration: none;
background: #FFF;
color: #000;
border:#000;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #000;
color: #FFF;
border-top: 1px solid #FFF;
border-right: 1px solid #FFF; /* this creates the button separation */
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
}