Question

我一直在研究一个新的菜单，我几乎就在那里，但箭头现在不在悬停区域，当我尝试用填充等进行排序时，它会让菜单在悬停时跳转。

http://www.streetstyles4all.co.uk/test4.html

以下是当前代码：

CSS：

span.arrowdown {
    border-color: #307AEF transparent transparent;
    border-style: solid;
    border-width: 7px;
    left: 7px;
    position: relative;
    top: 19px;
    z-index: 100;
}

#menu li.roundcorners:hover {
background: none repeat scroll 0 0 #E4E4E4;
border-radius: 5px 5px 5px 5px;
z-index: 20;
padding-bottom:0px;
}
    #menu li.roundcorners:hover a
{
}

#menu li {
border: medium none;
float: left;
margin-left: 14px;
margin-top: 3px;
padding: 5px 13px 0px;
position: relative;
z-index: 5;
}
#menu li:hover 
{
background: none repeat scroll 0 0 #E4E4E4;
border-radius: 5px 5px 0 0;
z-index: 5;
}
#menu li a{
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
color:#eeeeee;
display:block;
text-decoration:none; 
padding-bottom: 6px;
 padding-top: 1px;
position:relative;  }

HTML：

<a href="classes.html" class="drop" title="Street Dance Classes">
    <strong>Shop</strong><span class="arrowdown"></span>
</a>

有人可以帮忙吗？

Answer 1

你可以尝试这个，但我不知道，如果它在IE7中有效。

span.arrowdown {
    border-color: #307AEF transparent transparent;
    border-style: solid;
    border-width: 7px;
    float: right;
    margin: 6px 0 0 6px;
}

菜单尝试排序箭头定位时跳转

1 个答案: