Question

我在我的网站上有一个下拉菜单，它在firefox中工作正常..我使用了背景图像菜单及其大约80px高度..每当我将鼠标悬停在该图像上时，它应该显示子菜单作为下拉菜单它的工作正常在firefox ..但在chrome中，如果我鼠标悬停在菜单图像之外，下拉即将到来...我没有指定悬停的任何高度，但我不知道为什么它仍然会来，可以任何一个帮助我怎么解决这个问题？我在我的代码中使用了以下css。

这是一个小提琴 - 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 and 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;
}

悬停效果在chrome中的菜单外部应用

0 个答案: