我一直在练习编写这个网站一段时间，这只是一件小事，我一直很享受。我有一个问题，试图在我的导航栏上创建一个功能，当导航选项悬停时，绿色div向下滑动。我最近发布了一个关于同样事情的问题，得到了很好的答案，但即使在做了答案告诉我的事情之后，它仍然无效。我认为这是因为我没有提供足够的代码，这就是为什么我在这里发布了大部分代码，我很抱歉。请帮助，我已经推迟了这个问题一段时间，但现在我只是想修复它，所以我可以继续使用这个网站更多的互动的东西。感谢您的时间。
HTML：
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cambay' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Teko' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Magra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dhurjati' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="row" id="row0">
<!--NAVIGATION ANIMATIONS-->
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
<li class="nav_square specials_square" id="greenSpecials"></li>
<li class="nav_square jobs_square" id="greenJobs"></li>
<li class="nav_square league_square" id="greenLeague"></li>
<li class="nav_square contact_square" id="greenContact"></li>
<!--POSITION SAFE NAV SQUARES-->
<li class="nav_square safe_nav_squares home_square" id="home_safe"></li>
<li class="nav_square safe_nav_squares specials_square" id="specials_safe"></li>
<li class="nav_square safe_nav_squares jobs_square" id="jobs_safe"></li>
<li class="nav_square safe_nav_squares league_square" id="league_safe"></li>
<li class="nav_square safe_nav_squares contact_square" id="contact_safe"></li>
</ul>
<!--END OF NAV ANIMATION-->
<ul id="navlist">
<li class="navlistitems" id="home">Home</li>
<li class="navlistitems" id="specials">Specials</li>
<li class="navlistitems" id="jobs">Jobs</li>
<li class="navlistitems" id="league">League Bowling</li>
<li class="navlistitems" id="contact">Contact Us</li>
</ul>
</div>
<div class="row" id="row1">
<h1 class="1Headers" id="hodagLanes">Hodag Lanes</h1>
<h3 class="3Headers" id="location">Located in Rhinelander Wisconsin</h3>
</div>
<div class="row" id="row2">
<ul id="offer_bottom">
<li class="offeritem" id="spinitem">
<h3 class="3Headers" id="spin2win">Spin to Win Bowling 9:00-11:00</h3>
<p id="spinp">Come play spin to win! You have the chance to win amazing prizes, including a free game of bowling!</p>
<img src="http://www.socialbungy.com/img/home/spin-2-win-icon.png" id="spinimg">
</li>
<li class="offeritem" id="couponitem">
<h3 class="3Headers" id="coupons">Coupons</h3>
<p id="couponp">Free coupons for bowling and other local businesses! Download your free coupons today!
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsGCo_CzBamZcAV3uQzTLF8KKlwv4yp1Z5ZQkA1Wd4qzTFNJAN" id="couponimg">
</li>
</ul>
</div>
</body>
</html>
CSS：
body {
background-color:black;
}
#nav_animations {
display:inline;
position:relative;
bottom:13px;
}
#greenHome {
display:none;
}
.nav_square {
background-color:green;
width:100px;
height:15px;
z-index:22;
position:relative;
}
.home_square {
position:relative;
left:84px;
}
.specials_square {
position:relative;
left:310px;
bottom:16px;
}
.jobs_square {
position:relative;
left:530px;
bottom:31px;
}
.league_square {
position:relative;
left:790px;
bottom:47px;
}
.contact_square {
position:relative;
left:1113px;
bottom:62px;
}
.safe_nav_squares {
background-color:black;
z-index:-1;
position:relative;
bottom:75px;
}
#specials_safe {
bottom:91px;
}
#jobs_safe {
bottom:106px;
}
#league_safe {
bottom:122px;
}
#contact_safe {
bottom:137px;
}
#row0 {
position:relative;
bottom:10px;
width:100%;
height:10px;
}
#navlist {
display:inline;
font-family: 'Dhurjati', sans-serif;
font-size:45px;
position:relative;
bottom:186px;
}
.navlistitems {
display:inline;
padding:50px;
color:white;
}
#home:hover {
color:#BABABA;
text-shadow:0px 2px 3px green;
}
#specials:hover {
color:#BABABA;
text-shadow:0px 2px 3px green;
}
#jobs:hover {
color:#BABABA;
text-shadow:0px 2px 3px green;
}
#league:hover {
color:#BABABA;
text-shadow:0px 2px 3px green;
}
#contact {
font-size:40px;
}
#contact:hover {
color:#BABABA;
text-shadow:0px 2px 3px green;
}
#row1 {
width:100%;
height:500px;
background-image:url("http://lakewoodlanes.net/wp-content/uploads/2011/12/family_Bowling.jpg");
background-size:cover;
}
#hodaglanes {
font-family: 'Mallanna', sans-serif;
margin-left:auto;
margin-right:auto;
width:370px;
color:white;
font-size:70px;
position:relative;
top:80px;
}
#location {
font-family: 'Magra', sans-serif;
margin-left:auto;
margin-right:auto;
width:417px;
color:#D4D4D4;
font-size:30px;
position:relative;
top:80px;
}
#row2 {
width:100%;
height:70px;
display:inline;
position:relative;
left:100px;
}
#spin2win {
color:#6B6B6B;
font-family: 'Teko', sans-serif;
font-size:40px;
position:relative;
left:13px;
text-shadow:1px 1px 1px white
}
#spinimg {
border:1px solid black
position:relative;
height:300px;
}
#spinp {
color:white;
font-family: 'Cambay', sans-serif;
position:absolute;
bottom:287px;
text-align:center;
border:1px solid gray;
width:389px;
}
#couponp {
color:white;
font-family: 'Cambay', sans-serif;
position:absolute;
bottom:-295px;
text-align:center;
border:1px solid gray;
width:400px;
}
#coupons {
color:#6B6B6B;
font-family: 'Teko', sans-serif;
font-size:40px;
position:relative;
left:149px;
text-shadow:1px 1px 1px white
}
#couponimg {
height:300px;
}
#offer_bottom {
display:inline;
margin-left:auto;
margin-right:auto;
position:relative;
left:100px;
}
.offeritem {
display:inline;
}
#couponitem {
position:relative;
left:550px;
bottom:440px;
}
JavaScript的：
$('#home').hover(function(){
$('#greenHome').slideToggle('slow');
});
就像我说的那样，我非常抱歉将所有这些代码重载到你身上，我知道这违反了规则，但老实说我不知道该怎么做，我花了好几个小时试图调试我的代码。
仅供参考，因为css代码很可能不是问题所以你可能不必查看它，除非你在html或javascript中找不到它。