Simple Drop Down
Simple Drop Down
Well I have used this same script a few times, but this time I am having an issue, When I hover the text the drop down shows, as soon as I try to hover the drop down it will disappear.
I am also trying to make the background stick on main text (hover text) untl the mouse moves off. Been stuck on this for hours.
I upload it temp to view here: http://www.sukhgill.ca/Test/
Here is my HTML
<div class="header-nav">
<ul id="navigation">
<li><a href="">home</a></li>
<li>
<a href="">post</a>
<ul>
<li><a href="/card-products">Cards</a></li>
<li><a href="/clothing">Clothing</a></li>
<li><a href="/comics">Comics</a></li>
<li><a href="/games">Games</a></li>
<li><a href="/graphic-novels">Graphic Novels</a></li>
<li><a href="/magazines">Magazines</a></li>
<li><a href="/novels">Novels</a></li>
<li><a href="/toys-and-models">Toys & Models</a></li>
</ul>
</li>
<li>
<a href="">products</a>
<ul>
<li><a href="/card-products">Cards</a></li>
<li><a href="/clothing">Clothing</a></li>
<li><a href="/comics">Comics</a></li>
<li><a href="/games">Games</a></li>
<li><a href="/graphic-novels">Graphic Novels</a></li>
<li><a href="/magazines">Magazines</a></li>
<li><a href="/novels">Novels</a></li>
<li><a href="/toys-and-models">Toys & Models</a></li>
</ul>
</li>
<li><a href="">users</a></li>
<li><a href="">settings</a></li>
<li><a href="">logout</a></li>
</ul>
</div>
Here is the CSS:
.header-nav #navigation {
padding: 0px;
list-style: none;
font-family: Arial;
}
#navigation li {
float: left;
display: block;
position: relative;
margin: 0px;
font-size: 24px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
background: #FFA200;
border: 0px solid #FFA200;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}
#navigation li a {
color: #FFFFFF;
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
border: 0px solid #000000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}
#navigation li a:hover {
color: #36AD41;
text-decoration: none;
background: #000000;
}
#navigation li.active {
color: #FFFFFF;
text-decoration: none;
background: #000000;
}
#navigation li a.selected {
color: #4188B6;
background-color: #000000;
background: #000000;
}
/* submenu, it's hidden by default */
#navigation ul {
position: absolute;
display: none;
margin: 0 0 0 0px;
padding: 0;
list-style: none;
border: 1px solid #000000;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
}
#navigation ul li {
width: 100%;
float: left;
background-color: #000000;
border-top: 1px solid #000000;
font-size: 12px;
padding: 0px;
margin: 0px;
-moz-border-radius: 0px;
text-transform: capitalize;
}
/* display block will make the link fill the whole area of LI */
#navigation ul a {
display: block;
height: 100%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
color: #FFFFFF;
}
#navigation ul a:hover {
text-decoration: none;
color: #36AD41;
}
Finally the JS:
$(document).ready(function() {
$('#navigation li').hover(
function () {
$('ul', this).stop(false,true).slideDown('slow', function() {});
},
function () {
$('ul', this).stop(false,true).slideUp('slow', function() {});
}
);
});
Any help would be great, I just need a simple hover over drop down menu one level.