Ok, I am trying to make a drop down menu in JQuery and I have hit a roadblock. I have been trying for hours to work this out myself but i’m coming up with nothing, I searched for solutions but could not find any.
Ok, so the problem is that my dropdown items are displaying horizontally instead of vertically, here is the code:
<nav class="ribbon">
<ul>
<li class="dropdown">
<a href="#" class="nav"><h1>Home</h1></a>
<ul>
<li><a href="#"><h2>Page 1</h2></a></li>
</ul>
</li>
<li>
<a href="#" class="nav"><h1>About</h1></a>
</li>
<li class="dropdown">
<a href="#" class="nav"><h1>Recipes</h1></a>
<ul>
<li><a href="#"><h2>Page 1</h2></a></li>
<li><a href="#"><h2>Page 1</h2></a></li>
<li><a href="#"><h2>Page 1</h2></a></li>
<li><a href="#"><h2>Page 1</h2></a></li>
</ul>
</li>
<li>
<a href="#" class="nav"><h1>Contact</h1></a>
</li>
</ul>
</nav>
section#main section#ribbon nav.ribbon ul {
height: 40px;
}
section#main section#ribbon nav.ribbon ul li {
height: 40px;
float: left;
text-align: center;
}
section#main section#ribbon nav.ribbon ul li.dropdown {
overflow: hidden;
}
section#main section#ribbon nav.ribbon a.nav, section#main section#ribbon nav.ribbon ul li a.nav:visited {
color: #d3c682;
text-decoration: none;
}
section#main section#ribbon nav.ribbon ul li a.nav:hover {
color: #ffffff;
}
section#main nav.ribbon ul li a.nav h1 {
font-size: 1.878em;
font-weight: normal;
display: inline;
line-height: 1.4em;
}
section#main nav.ribbon ul li.dropdown ul {
height: 250px;
}
section#main nav.ribbon ul li.dropdown ul li {
background-color: #000000;
}
section#main nav.ribbon ul li.dropdown ul li a.sub-nav {
}
$(document).ready(function(){
//when mouse rolls over
$('nav.ribbon ul li.dropdown').mouseover(function(){
$(this).stop().animate({'height':'250px'}, 500, 'swing');
});
//when mouse is removed
$('nav.ribbon ul li.dropdown').mouseout(function(){
$(this).stop().animate({'height':'40px'}, 500, 'swing');
});
});
I hope someone can help, thanks.