Navigation List items displaying inline

JavaScript
1

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.

2

This is a CSS issue. You need to set the LIs in the sub ULs to float: none. It would be easier to help with a live link.