drop down menu
drop down menu
Hey guys I am creating a drop down menu using jquery and I am getting a problem.
When I hover over the link it displays how I want and then the second and thrid time I hover over the same link the drop down menu gets smaller and smaller and finnally stops working her is the code:
$(document).ready(function(){
$('.nav-point').hover(
function () {
$('.sub-nav',this).stop().slideDown(400);
},
function () {
$('.sub-nav',this).slideUp(100);
}
);
});
$(document).ready(function(){
$('.nav-point').hover(
function () {
$('.sub-navB',this).stop().slideDown(400);
},
function () {
$('.sub-navB',this).slideUp(100);
}
);
});
Would the problem be in the css:
#nav{
background: url(images/nav_bg.jpg)repeat-x;
font-size: 18px;
height: 51px;
margin: 0 auto;
margin-top:40px;
padding-top:15px;
padding-left:145px;
}
#nav ul.menu {
margin:0 auto;
display: block;
list-style: none;
height: 51px;
width: 960px;
padding-top:1px;
}
.sub-nav {
background:#cc9933 url(images/nav_bg.jpg)repeat-x ;
margin-top:5px;
margin-left:48px;
height:40px;
padding-top:10px;
padding-right:10px;
list-style-type:none;
display:none;
position: absolute;
}
.sub-navB {
background:#cc9933 url(images/nav_bg.jpg)repeat-x ;
text-align: center;
height:40px;
padding-top:10px;
margin-top:5px;
padding-right:10px;
margin-left:410px;
padding-right:5;
list-style-type:none;
display:none;
position: absolute;
}
.point{
cursor:pointer;
}
#nav ul li {
display: inline;
padding-left:20px;
text-align: left;
text-decoration: none;
color:#fff;
}
#nav a{
text-decoration: none;
color:#fff;
outline: none;
}
#nav a:hover{
color: #6d6d6d;
}
#nav a:selected{
outline:none;
}