Question

I have been working on a new menu and I’m almost there, but the arrow is now not in the hovered area, and when I try and sort it with padding etc it makes the menu jump around when hovered.

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

Here is the current code:

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>

Can anyone help?

Answer 1

You can try this, but I don’t know, if it works in IE7.

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