0
Итак, у меня есть веб-сайт, который я пытаюсь сделать, и есть раскрывающееся меню, которое должно работать. Я даже использовал один из ответов здесь, чтобы получить код для этого меню, создал все соответствующие классы и все, но он по-прежнему отказывается работать. И я имею в виду, что это буквально просто сидит там статически. Он должен упасть с изображения.Выпадающее меню JQuery/JavaScript не работает
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NEStalgia::Home</title>
<link rel="stylesheet" href="assets.css">
<script src="main.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/header.png" alt="NEStalgia" href="index.html" class="header_menu"/>
<br />
<ul class="hover">
<li class="hoverli">
<img src="images/menubricks.png" alt="menu bar" class="menu_class" />
<ul class="file_menu">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="shop.html">Shop</a>
<ul class="sub">
<li><a href="headware.html">Headwear</a></li>
<li><a href="apparel.html">Apparel</a></li>
<li><a href="accessories.html">Accessories</a></li>
<li><a href="cosplays.html">Cosplays</a></li>
<li><a href="plushies.html">Plushies</a></li>
</ul>
</li>
<li><a href="registration.html">Register</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="tableinfo">
<table id="intro">
<tr>
<td>Welcome to NEStalgia.<br />
We are a gaming merchandise online store that takes great
pride in our work. We have hundreds of great options between
several categories: headwear, apparel, accessories, and so
many more!</td>
<td> </td>
<td> </td>
<td> </td>
<td>
<a href="headwear.html"><img src="images/headwear.png" alt="headwear" /></a>
<a href="apparel.html"><img src="images/apparel.png" alt="apparel" /></a>
<a href="accessories.html"><img src="images/accessories.png" alt="accessories" /></a>
</td>
</tr>
<tr>
<td>Don't forget to check out<br />
our coupons page! It's filled with TONS of wonderful coupons
that you're sure to love, like 50% off your entire purchase!
Check in every Friday to see the coupons page updated, and be wary:
some coupons start on a specific day, so until that day, you aren't
able to use them!</td>
<td> </td>
<td> </td>
<td> </td>
<td>
<a href="cosplays.html"><img src="images/cosplays.png" alt="cosplays" /></a>
<a href="plushies.html"><img src="images/plushies.png" alt="plushies" /></td></a>
</tr>
</table>
</div>
</div>
<div id="footer">
<footer>
<table id="tablefoot">
<tr>
<td>© Copyright NEStalgia 2015<br />
All rights reserved. </td>
<td>Disclaimer: The images used on this site<br />
have been taken from Google Images. Do not search<br />
for this site on Facebook as it is a mock storefront<br />
for a final project. Do not attempt to purchase anything<br />
from this site either. Thank you for your understanding<br />
and cooperation.</td>
<td>Interested in keeping up with us?<br />
Be sure to check out our Facebook page!</td>
</tr>
</table>
</footer>
</div>
</div>
</body>
</html>
CSS
html, body {
padding: 0px;
margin: 0px;
margin-right: 0px;
height: 100%
}
body {
background: url('images/mariostar.png') top left repeat-y,
url('images/mariostar.png') top right repeat-y;
background-color: white;
color: black;
font-family: Arial, Helvetica, sans-serif;
height: 2000px;
}
a {
text-decoration: none;
}
footer {
padding-top: 55px;
padding-bottom: 25px;
}
img {
z-index: 1;
}
li {
list-style: none;
}
.container {
position: relative;
width: 920px;
margin: 30px auto;
}
.container #product {
position: relative;
z-index: 2;
float: left;
width: 670px;
}
.container #sidebar {
position: relative;
z-index: 1;
float: right;
width: 224px;
}
.file_menu {
display:none;
width:300px;
border: 1px solid #1c1c1c;
position: relative;
}
.file_menu li {
background-color: #302f2f;
position: relative;
}
.file_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.file_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
.menu_class {
border:1px solid #1c1c1c;
}
.sub {
position: absolute;
width:300px;
border: 1px solid #1c1c1c;
display: none;
left: 302px;
top: 0px;
}
#content {
padding-bottom: 200px;
}
#footer {
border-left: 10px solid #5AB3FF;
border-right: 9px solid #5AB3FF;
background: #A0D3FF;
color: black;
text-align: center;
width: 98.65%;
height: 200px;
position: absolute;
bottom: 0;
left: 0;
}
#header {
text-align: center;
padding: 10px;
}
#header img {
margin-left: 3px;
}
#header ul li {
list-style-type: none;
margin: 0px;
}
#header ul li a {
text-decoration: none;
}
#intro {
text-align: left;
margin-right: 5px;
width: 1100px;
}
#intro img {
margin: 5px;
}
#intro tr td:first-of-type {
width: 250px;
}
#intro tr td:last-of-type {
width: 800px;
text-align: center;
}
#intro td:first-of-type:first-line {
text-transform: uppercase;
color: #5AB3FF;
font-weight: bold;
}
#tablefoot {
padding-left: 100px;
width: 1300px;
}
#tablefoot tr td {
font-size: 10px;
}
#tableinfo {
margin-left: 125px;
margin-top: 50px;
margin-bottom: 50px;
}
#wrapper {
min-height:100%;
position:relative;
}
JavaScript & JQuery
$(document).ready(function() {
$(".hoverli").hover(
function() {
$('ul.file_menu').slideDown('medium');
},
function() {
$('ul.file_menu').slideUp('medium');
}
);
$(".file_menu li").hover(
function() {
$(this).children("ul").slideDown('medium');
},
function() {
$(this).children("ul").slideUp('medium');
}
);
});
Fiddle http://jsfiddle.net/yutikohercell/68u51juh/light/
Live Preview http://jsfiddle.net/yutikohercell/68u51juh/embedded/result/
Вам не хватает ссылки jquery в скрипке. Прекрасно работает здесь: http://jsfiddle.net/68u51juh/3/ – DinoMyte