I’m working on a project for my html/css class. I’m trying to get the menu options to drop down with a mouseover using jquery. Any help will be much appreciated.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>The Mountain Spoke: Best Biking EVER!</title>
<meta charset="utf-8">
<meta name="description" content="The Mountain Spoke: Exciting locals around the world to biking">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/medium.css">
<link rel="stylesheet" href="styles/large.css">
<link rel="stylesheet" href="styles/normalize.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(function(){
$('.dropdownMenu > li').hover(function(){
$(this).children("ul").slideToggle(200);
});
})
</script>
</head>
<body onload="theDate()">
<header>
<img class="logo" src="images/logo.jpg" alt="The mountain biking site logo">
<div class="company">
<h1 class="spoke">The Mountain Spoke</h1>
<div class="title">World-class biking for the world!</div>
</div>
<button onclick="Menu()" class="hamburger">☰</button>
</header>
<nav>
<ul class="navbar">
<li class="nav"><a href="home.html">Home</a></li>
<li class="nav"><a href="adventure-tours.html">Adventure Tours</a></li>
<li class="nav"><a href="events.html">Events</a></li>
<li class="nav"><a href="sales.html">Sales</a></li>
<li class="nav"><a href="service.html">Service</a></li>
<li class="nav"><a href="contact-us.html">Contact Us</a></li>
</ul>
</nav>
<main>
<section class="salespage">
<div>
<ul class="dropdownmenu">
<li class="bike"><img src="images/cannondale-2017-cannondale-trail-5small.jpg" alt="cannondale 2017 mountain bike">
<ul class="fall">
<li class="bike">$599</li>
<li class="bike">The perfect ride for someone getting into mountain biking. The traill offers the best performance value on the mountain and is ready for anything from racing to full-blown trail duty.</li>
</ul>
</li>
<li class="bike"><img src="images/cannondale-2018-cannondale-catalyst-4small.jpg" alt="cannondale 2018 mountain bike" class="bikepic">
<ul class="fall">
<li class="bike">$399</li>
<li class="dobikewn">Satisfy your urge for adventure! The Catalyst is a lightweight Alloy frame, great riding position, and a wide range in gearing. Ride down the trail in confidence.</li>
</ul>
</li>
<li class="bike"><img src="images/cannondale-2018-cannondale-fat-caad-2-slasmall.jpg" alt="cannondale 2018 fat tire mountain bike" class="bikepic">
<ul class="fall">
<li class="bike">$1899</li>
<li class="bike">A fatbike without the fat? The Fat CAAD 2 is so lightweight and the nimble front geometry gives you the agility on the trail and speed that you will want to ride this bike all year long!</li>
</ul>
</li>
</ul>
</div>
</section>
<p>*Prices are subject to change.
<br>
**Not all bikes are listed. If there are any questions don't hesitate to contact us at, <a href="contact-us.html">Click Here!</a></p>
</main>
<footer>
<script src="scripts/date.js"></script>
<script src="scripts/menu.js"></script>
<div class="info">
<p>The Mountain Spoke</p>
<p>406-587-5404</p>
<p>3950 Valley Commons Drive Bozeman, MT</p>
</div>
<div class="bar">©2018 | All Rights Reserved | The Mountain Spoke | <span id="demo"></span>
</div>
</footer>
</body>
</html>
/* Delete these CSS comments after reading. */
/* This main css file contains the default rules and is geared toward the small/phone view */
* { box-sizing: border-box;} /* This wildcard applies to all elements ensuring a box layout model */
body {
font-size: 16px;
font-family: sans-serif; /* Declare the base font-family */
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
header, nav, main, footer { /* the comma between the selectors means apply the following CSS declarations to all of the listed elements */
max-width: 100%; /* Declare the maximum width and other main element rules to limit the stretch on larger/wider views */
}
.navbar {
margin-bottom: 20px;
}
.nav {
display: inline-flex;
flex-flow: row;
border-top: solid 1px black;
padding: 6px;
background-color: #228B22;
}
.navbar.responsive {
display: block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo {
max-height: 150px;
}
.company {
display: inline;
position: absolute;
}
.spoke {
position: relative;
padding-top: 5px;
padding-bottom: none;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 3em
}
.title {
margin-left: 25px;
margin-top: 20px;
font-family: 'Oxygen', sans-serif;
font-size: 1.1em;
}
footer {
display: flex;
flex-direction: column;
border-top:solid 1px black;
text-align:center;
/*bottom:0;
width:100%;*/
margin-top:25px;
background-color: #aa7243;
}
.info {
padding: none;
}
form fieldset {
margin: 2rem 0;
border: 1px solid #445ba9;
border-radius: 10px;
padding: .5rem 2%;
}
form legend {
color: #445ba9;
margin: 0 1rem;
text-align: center;
}
form label.top, form div {
display: block;
padding-top: 1rem;
color: #9c2c13;
font-size: .8rem;
}
form label.top input, form label.top select {
display: block;
font-size: 1rem;
border: solid 1px #999;
border-radius: 4px;
padding: .75rem;
color: #555;
width: 100%;
max-width: 20rem;
background-color: rgba(0,0,0,0.1);
}
form label.middle input, form label.middle select {
display: block;
font-size: 1rem;
border: solid 1px #999;
border-radius: 4px;
padding: .75rem;
color: #555;
width: 100%;
max-width: 20rem;
background-color: rgba(0,0,0,0.1);
background-color: white;
}
form fieldset label.interest {
display: block;
font-size: 1.2rem
}
form fieldset label.interest input {
margin-right: 5px;
}
form label.top input {
background-color: white;
}
form label.middle {
display: block;
padding: .75rem;
color: #555;
}
form input.button {
border: none;
background-color: #9c2c13;
color: white;
border-radius: 1rem;
padding: .75rem 1.5rem;
margin: 0 0 2rem 2%;
width: 96%;
max-width: 20rem;
}
form label.top input:required {
border-left: red solid 6px;
}
form label.top input:required:valid {
border-left: green solid 6px;
}
.repair {
width: 100%;
height: 200px;
}
.repairs {
text-align: center;
}
section.forecast {
display: inline-flex;
justify-content: center;
}
th, td {
border: 1px solid black;
padding-right: 8px;
text-align: center;
}
.drop {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
width:960px;
height:100px;
margin:auto;
list-style:none;
padding:0px;
border-top: 4px solid red;
}
.down {
width: 190px;
height: 48px;
float: left;
text-align: center;
background:rgb(240, 240, 240);
font-family: sans-serif;
line-height: 3.6;
text-shadow: 0px 1px 1px rgba(0,0,0,0.4);
font-size: 14px;
margin: 1px;
}
.down > .drop {
position:relative;
width:190px;
clear:both;
/* Hide the Submenus */
display:none;
}
.fall {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
width:960px;
height:100px;
margin:auto;
list-style:none;
padding:0px;
border-top: 4px solid red;
}
.bike {
width: 190px;
height: 200px;
float: left;
text-align: center;
background:rgb(240, 240, 240);
font-family: sans-serif;
line-height: 3.6;
text-shadow: 0px 1px 1px rgba(0,0,0,0.4);
font-size: 14px;
margin: 1px;
}
.bike > .fall {
position:relative;
width:190px;
clear:both;
/* Hide the Submenus */
display:none;
}
@media only screen and (max-width: 37.5em) {
.hamburger {
display: inline;
position: absolute;
top: 180px;
left: 25px;
padding: 4px 13px;
font-size: 30px;
}
.nav {
display: block;
}
.navbar {
display: none;
}
.info, .bar {
font-size: 10px;
}
.banner {
font-size: 1.8em;
text-align: center
}
}