I am interested in creating a drop-down menu using jquery (here's the corresponding jsFiddle).
HTML:
<ul id="mainmenu">
<li><a href="http://myszki/">Aktualności</a></li>
<li class="parent item13"><a href="/start.html">Galerie</a>
<ul>
<li><a href="/start/plenery.html">Plenery</a></li>
</ul>
</li>
<li class="parent"><a href="/start.html">Galerie</a>
<ul>
<li><a href="/start/plenery.html">Plenery</a></li>
</ul>
</li>
</ul>
JS:
$(document).ready(function()
{
var sub = 'ul#mainmenu li.parent ul';
var parents = 'ul#mainmenu li.parent';
var count = 0;
$(sub+", "+parents).mouseenter(
function()
{
$(this).children('ul').addClass('submenu');
var width = $(parents).width();
count++;
$(sub).find('a').css({'width':width}); //setting display parameters
if ($(sub).is(':visible'))
{
$(sub).stop(true, true).show(); //show
}
else
{
$(this).find('ul.submenu').stop(true, true).delay(800).slideDown('fast');
}
}).mouseleave(
function ()
{
count--;
if (!count)
{
$(sub).stop(true, true).slideUp('fast');
}
});
});
CSS:
ul#mainmenu {
width: 990px; height: 35px;
background:#000;
clear: both;
}
ul#mainmenu li {float:left; position: relative; }
ul#mainmenu li a {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 35px; padding: 0 19px 0 20px;
display: block;
z-index: 150;
position: relative;
}
ul#mainmenu li.backLava {background: url(../images/arrow_menu.png) no-repeat center bottom #202223; z-index: 20;}
ul#mainmenu li span {background: url(../images/star.png) left no-repeat; padding-left: 15px; z-index:50;}
ul#mainmenu li.parent ul {display: none; position: absolute; top:35px; }
ul#mainmenu li.parent ul li {border-bottom:1px solid darkgrey; border-left:1px solid darkgrey; border-right:1px solid darkgrey;}
ul#mainmenu li.parent ul span {background: none; padding-left: 4px;}
ul#mainmenu li.parent ul li a {text-decoration: none; background:#eeeeee; color: #000; font-size: 12px; line-height: 25px; display: block; padding: 0px; text-transform: none; opacity:0.8;filter:alpha(opacity=80); font-weight: normal; }
ul#mainmenu li.parent ul li.hover a { color: #000; }
The issue arises when hovering over one parent button causes all parent buttons to expand. What modifications should I make to my code?