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">             &nbsp;&nbsp;&nbsp;&nbsp;</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">             &nbsp;&nbsp;&nbsp;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

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -