html - hover effect is applying outside the menu in chrome -
i have drop down menu in site , working fine in firefox.. have used background image menu , around 80px height.. whenever mouse on over image should display sub menu drop down , working fine in firefox..but in chrome if mouse on outside menu image drop down coming... have not specified height hover not getting why still coming , can 1 me how solve this?
following css have used in code.
here fiddle - fiddle link.
html
<div style="background: url(pro_drop_1/bg-menu-small-wtih-orange.png) no-repeat; height:130px;width:1050px;"> <ul id="nav"> <li class="top"><a href="" class="top_link" id="lnk1" onclick="checklnk(1)" onmouseover="backimage(1)" style="background-image: url(http://localhost/fms/php/pro_drop_1/lrimages/button-small-in.png); color: rgb(86, 72, 46);"><span class="down"><div id="menudiv1">home</div><b id="spa"> </b></span></a> </li> <li class="top"><a href="" class="top_link" id="lnk2" onclick="checklnk(2)" onmouseover="backimage(2)" style="background-image: url(http://localhost/fms/php/pro_drop_1/lrimages/button-small-in.png); color: rgb(86, 72, 46);"><span class="down"><div id="menudiv">aquila</div><b id="spa"> advantage</b></span></a> <ul class="sub"> <li><a href="../brochure/b101 v2.pdf#zoom=70,250,100" target="_blank" id="lnk2" onclick="checklnk(2)">features , specification</a></li> <li><a href="../brochure/benfits.jpg" target="_blank" id="lnk2" onclick="checklnk(2)">benefits</a></li> </ul> </li> </ul> </div> css
#nav { padding: 0; margin: 0; list-style: none; height: 6px; background: #fff; position: relative; z-index: 500; font-family: arial, verdana, sans-serif; width: 1050px; } #nav li.top { display: block; float: left; } #nav li a.top_link { display: block; float: left; height: 62px; line-height: ; color: #56482e; text-decoration: none; font-size: 11px; font-weight: bold; padding: 0 0 0 0; cursor: pointer; background: url(bg-menu.png); } #nav li a.top_link span.down { float: left; display: block; padding: 0 27px 0 27px; height: 62px; /* background: url(button-small-out.png) no-repeat left top; */ } #nav li:hover ul.sub { left: 0; top: 62px; background: #fbbd30; padding: 6px; border: ; white-space: nowrap; width: 160px; height: auto; z-index: 400; float: left; }
Comments
Post a Comment