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

问题描述：

我一直在研究一个新的菜单，我几乎在那里，但箭头现在不在徘徊区域，当我尝试和填充等排序它使当盘旋时菜单跳转。菜单当尝试排序箭头定位时跳跃

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>

谁能帮助？

'位置：锚和'位置relative'：上跨度absolute'的标准方式 – mreq 2012-01-31 12:18:26

感谢。但现在我回到了我的另一个问题。现在，如果您查看同一页面，箭头位于悬停区域之外。当我尝试纠正这个问题时，当你悬停时，菜单开始在所有地方跳跃。我知道有一个简单的解决方案，但一直在围绕着圈子！ – SS4A 2012-01-31 12:38:22

答

你可以试试这个，但我不知道它是否适用于IE7。

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

是的！稍微调整它，它似乎工作。我用： span.arrowdown border-color：＃307AEF transparent transparent; border-style：solid; border-width：7px; float：right; margin：10px -5px 0 4px; } – SS4A 2012-01-31 14:10:09

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

相关推荐