メニュー矢印の位置を並べ替えるときに跳ね返る

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