html - jQuery SlideDown Submenu Top Margin -
i have following code slide down menu:
jquery(window).ready(function(){ jquery('.menu>li').hover(function(){ jquery(this).find('ul').first().stop(true,true).slidedown(400); }, function(){ jquery(this).find('ul').first().stop(true,true).slideup(); }); jquery('.menu>li>ul>li').hover(function(){ jquery(this).find('ul').first().stop(true,true).slidedown(400); }, function(){ jquery(this).find('ul').first().stop(true,true).slideup(); }); });
it works swimmingly, except when .menu ul ul displayed, slides down 1 level down parent item, 1 cannot hover on it. fixed using negative margin-top .menu ul ul, way slidedown function looks sliding mid-way top , bottom, rather top down. suggestions on how put permanent fix on either through jquery or css?
here's css file:
.menu { padding:0; margin: 0; } .menu ul{ list-style: none; margin: 0; padding: 0; } .menu li{ /*these main menu items*/ list-style: none; float: left; line-height: 37px; font-family: arial; font-size: 13px; margin: 0; padding: 0; } .menu li ul { /*first drop-down*/ left: -999em; position: absolute; width: 186px; z-index: 500; background: #666666; display: none; } .menu li:hover ul { left: auto; } .menu li ul ul { margin-left: 186px; display: none; } .menu li ul li { text-align: left; width: 186px; } .menu { display: block; font-weight: bold; text-decoration: none; color: #fff; margin: 0; padding-left: 30px; padding-right: 30px; } .menu li.active { background: #454545; } .menu a:hover{ color: #fbf4b6; background: #333; } .menu li ul li { padding-left: 30px; padding-bottom:2px; padding-top:2px; border-bottom: 1px solid #999; } .menu li.active ul li a:hover { background: #333; }
i found how solve here: http://jsfiddle.net/297t6/
.menu { margin:0; padding:0; } .menu > li { list-style:none; float:left; margin:0; padding:0; position:relative; } .menu { text-decoration:none; color:#fff; background:red; display:block; padding:10px; } .menu > li ul { margin:0; padding:0; width:150px; position:absolute; display:none; z-index: 999; } .menu > li ul ul { margin:0; padding:0; width:150px; position:absolute; display:none; left:150px; top:0; z-index: 999; } .menu > li ul li { margin:0; padding:0; list-style:none; position:relative; }
copied css , javascript (which cleaner had), changed class names voilla - works.
Comments
Post a Comment