hi have menu , submenu there div element submenu.i m able div element when hover on hyperlink of first menu li,but doesn't disappear when take out mouse div element.it continously appears,so want hide div element when mouseout div or somewhere else.on mouseout im not written code "display","none" due on hover link works remains appears.
html
<ul class="main-nav"> <li ><a href="#" id="menu1">products & services</a></li> <li><a href="#" id="menu1">solution , technologies</a></li> <li><a href="#" id="menu1">about us</a></li> <li><a href="#" id="menu1">investors</a></li> <li style="border:none;"><a href="#" id="menu1">newsroom</a></li> </ul> <!--1st drop down menu --> <div id="dropmenu1" class="dropmenudiv" style=" position:absolute; font-size:12px; z-index:1; display:none; border:1px solid #d8d8d8;"> <a id="consumer1" style="visibility:hidden;" href="#">consumer & home</a> <a href="#">aerospace & defense</a> <a href="#">safety & security</a> <a href="#">scanning & mobile productivity</a> </div> css
.dropmenudiv a{ background:url(images/dropdown_bg.jpg); text-decoration:none; display:block; line-height:14px; padding:2px;} ul.main-nav{list-style:none; border:1px solid #666; overflow:hidden; background:url(images/mnu_grad_normal.jpg) repeat-x; height:37px; line-height:36px;} ul.main-nav li { float:left; font-size:12px; border-right:1px solid #999; padding:0px 32px;} ul.main-nav li a{ color:#000000; text-decoration:none;} ul.main-nav li a:hover{ color:#ff0000;} js:
$(document).ready(function() { $('#menu1').mouseover(function(){ $('#dropmenu1').css("display","block"); $('#dropmenu1').css({'width':'202px','height':'auto'}); $('#menu1').mouseout(function(){ });
do without javascript. css menu css dropdown menu , link fiddle
<ul id="nav"> <li ><a href="#">products & services</a> <ul> <li><a id="consumer1" href="#">consumer & home</a></li> <li><a href="#">aerospace & defense</a></li> <li><a href="#">safety & security</a></li> <li><a href="#">scanning & mobile productivity</a></li> </ul> </li> <li><a href="#">solution , technologies</a></li> <li><a href="#">about us</a></li> <li><a href="#">investors</a></li> <li style="border:none;"><a href="#">newsroom</a></li> </ul> #nav{ list-style:none; font-weight:bold; margin-bottom:10px; float:left; width:100%; } #nav li{ float:left; margin-right:10px; position:relative; } #nav a{ display:block; padding:5px; color:#fff; background:#333; text-decoration:none; } #nav a:hover{ color:#fff; background:#6b0c36; text-decoration:underline; } #nav ul{ background:#fff; background:rgba(255,255,255,0); list-style:none; position:absolute; left:-9999px; } #nav ul li{ padding-top:1px; float:none; } #nav ul a{ white-space:nowrap; } #nav li:hover ul{ left:0; } #nav li:hover a{ background:#6b0c36; text-decoration:underline; } #nav li:hover ul a{ text-decoration:none; } #nav li:hover ul li a:hover{ background:#333; } 
Comments
Post a Comment