Top Nav when hovered doesn't keep consistant original heights for each ul in its hover state.
- jQuery(document).ready(function(){
$( '#nav_Primary > li' ).hover(function(){
alert($(this).find('ul').outerHeight(true));
$(this).find('ul')
.stop( true )
.animate(
{height:'toggle'},
{duration: 600, easing: 'swing'}
);
},
function() {
$(this).find('ul')
.stop( true )
.animate(
{height:'toggle'},
{duration: 600, easing: 'swing'}
);
});
});
- <ul id="nav_Primary">
<li><a href="#">Top Menu Item</a>
<ul>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
</ul>
</li>
<li><a href="#">Top Menu Item</a>
<ul>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
</ul>
</li>
<li><a href="#">Top Menu Item</a>
<ul>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
</ul>
</li>
<li><a href="#">Top Menu Item</a>
<ul>
<li><a href="#"> Blah blah blah</a></li>
<li><a href="#"> Blah blah blah</a></li>
</ul>
</li>
</ul>
- nav ul#nav_Primary {
float:left;
list-style-type: none;
}
nav ul#nav_Primary li {
float:left;
margin:1px 0 0 0;
position:relative
}
nav ul#nav_Primary li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color:#fff;
text-decoration:none;
padding:8px 10px 9px 10px;
border-right: solid #c06b6b 1px;
display: block;
text-align:left;
}
nav ul#nav_Primary li a:hover,
nav ul#nav_Primary li a:focus,
nav ul#nav_Primary li a.down {
color:#990000;
}
nav ul#nav_Primary li ul {
position:absolute;
top:32px;
left:-1px;
border-left: solid #c36b6b 1px;
border-right: solid #c36b6b 1px;
border-bottom: solid #c36b6b 1px;
display:none;
z-index: 1000;
}
nav ul#nav_Primary li ul li {
display:block;
clear:both;
margin:0;
}
nav ul#nav_Primary li ul li a {
border:none;
color:#990000;
background: rgba(255, 255, 255, 0.8);
float:left;
width: 170px; /*width of sub menus*/
padding:5px 10px 5px 10px;
}
nav ul#nav_Primary li ul li a:hover,
nav ul#nav_Primary li ul li a:focus {
background: rgba(153, 0, 0, 0.8);
color:#fff;
}
Once you load this up you will see that eventually the hover will not set the height correctly. Keep on hovering on each item and then leaving it before it fully expands and then the next time you go over it it will leave off where the last item had expanded to