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

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;
}