I am using jquery for the dropdown and i want to be able to display background-color / image when
i hover over my list item and so it stay active when the submenu shows and goes off when the mouse moves off it
I am not sure if this will require changes to my JS and Html could someone help me with this, thanks.
I have put the page on jsfiddle with that you can see the live code and make changes etc.
LIVE CODE
http://jsfiddle.net/datastream/REJG2/3/
here is the same code-
JS
$(function () {
$('.dropdown').each(function () {
$(this).parent().eq(0).hover(function () {
$('.dropdown:eq(0)', this).show();
}, function () {
$('.dropdown:eq(0)', this).hide();
});
});
});
HTML
<div class="navBG">
<ul id="nav-container" name="nav-container">
<li class="active-link"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a>
<ul class="dropdown">
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
</ul>
</li>
<li><a href="#"><span>Menu</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul><!--nav-container-->
</div>
/* NAV
*************************/
.navBG {
background-color: #0A5319;
height: 100px;
width: 900px;
margin: 0 auto;
background-repeat: repeat-x;
}
#nav-container {
display: block;
width: 900px;
float: right;
position: relative;
left: 120px;
top: 0px;
}
#nav-container li a span {
display: inline;
height: 36px;
padding-top: 12px;
padding-left: 13px;
padding-right: 14px;
float: left;
}
#nav-container .active-link span {
background-color:#ccc;
background-repeat: repeat-x;
display: block;
color: #000;
}
#nav-container li a:hover span {
display: block;
background-color:#ccc;
background-repeat: repeat-x;
}
#nav-container li {
list-style-type: none;
display: inline;
}
#nav-container li a {
list-style-type: none;
color: #FFF;
font-size: 14px;
font-family: "Myriad Pro";
text-decoration: none;
float: left;
padding-left: 8px;
}
#nav-container li a:hover {
color: #575757;
}
/* NAV
*************************/
/* NAV DROPDOWN
*************************/
ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 9999;
top: 100%;
width: 300px;
display: none;
left: 80px;
background-color: #eee;
font-size: 11px;
height: 90px;
}
ul.dropdown ul.dropdown
{
top: 0px;
left: 95%;
}
ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
color: #3C3C3C;
line-height:20px !important;
}
ul.dropdown li a
{
display: block;
color: #3C3C3C;
font-size: 11px;
}
ul.dropdown li a span {
font-size: 11px;
color: #3C3C3C;
}
ul.dropdown li a .subtxt{
font-size: 11px;
color: #3C3C3C;
height:20px;
background: none !important;
z-index: 5;
}
ul.dropdown li a:hover .subtxt {
font-size: 11px;
color: #060;
background-repeat: repeat-x;
background-position: bottom;
background: none !important;
text-decoration:underline;
}
/* NAV DROPDOWN
*************************/