alhermette - 10:32 am on Oct 30, 2012 (gmt 0)

Thank you for your help. I'll elaborate a bit to try and put you in the picture. What I am doing is modifying some code for a navigation menu. It has 3 levels 1- horizontal, 2- dropdown, 3- flyout.

What I am adding is code that appends a downward pointing arrow to any of the level 1 menu elements that contain chils elements ie there are items in the dropdown. Likewise I am appending a right pointing arrow to any elements in the dropdown that have child elements ie there are items in the flyout.

This is the general html structure:

<div id="Navigation">
<ul>
<li>
<a href="#">Meun link 1</a>
</li>
<li>
<a href="#">Meun link 2</a>
<ul>
<li><a href="#">Dropdown link 2.1</a></li>
<li><a href="#">Dropdown link 2.1</a></li>
</ul>
</li>
<li>
<a href="#">Meun link 3</a>
<ul>
<li>
<a href="#">Dropdown link 3.1</a>
<ul>
<li><a href="#">Flyout link 3.1.1</a></li>
<li><a href="#">Flyout link 3.1.2</a></li>
<li><a href="#">Flyout link 3.1.3</a></li>
</ul>
</li>
<li>
<a href="#">Dropdown link 3.2</a>
<ul>
<li><a href="#">Flyout link 3.2.1</a></li>
<li><a href="#">Flyout link 3.2.2</a></li>
<li><a href="#">Flyout link 3.2.3</a></li>
</ul>
</li>
<li>
<a href="#">Dropdown link 3.3</a>
<ul>
<li><a href="#">Flyout link 3.3.1</a></li>
<li><a href="#">Flyout link 3.3.2</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Meun link 4</a>
<ul>
<li><a href="#">Dropdown link 4.1</a></li>
</ul>
</li>
</ul>
</div>

This is the CSS:

#Navigation
{
width:100%; /* Set menu bar width */
font: bold 18px Arial, Helvetica, Sans-serif;
border: 1px solid #1e4b7d;
border-radius: 5px; /* CSS3 - Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
background-clip: padding-box; /* Prevent background color leak outs */
overflow: hidden;
}

#Navigation ul /* Menu bar */
{
float:left; /* Needed to get the background to fill the whole ul */
width:100%; /* Needed to get the background to fill the whole ul */
list-style:none;
background:#4e749a; /* For non-css3 browsers */
}

#Navigation ul li /* Menu bar tab */
{
float:left; /* Convert menu to horizontal */
}

#Navigation ul li a /* Menu bar tab hyperlink */
{
float: left; /* For some reason this is needed to get it to display correctly */
color:#ededed;
padding:0px 20px 0px 20px; /* Top Right Bottom Left */
line-height:35px;/* Set menu bar height */
text-decoration:none;
background:#4e749a; /* For non-css3 browsers */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

#Navigation ul li a:hover, /* Menu bar tab hyperlink on hover*/
#Navigation ul li:hover > a /* Menu bar tab containing child hyperlink on hover*/
{
color: #ffffff;
background: #9ae5fc; /* Old browsers */
}

#Navigation li ul a:hover,
#Navigation ul li li:hover > a
{
color:#ffffff;
background: #7abcff; /* Old browsers */
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}



#Navigation li ul /* Dropdown & flyout default state*/
{
font: bold 12px Arial, Helvetica, Sans-serif;
background: #4da2e2; /* Old browsers */
border-radius: 0 10px 10px 10px;
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 200px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(30, 75, 125, 0.5);
}

#Navigation li:hover ul /* Child ul on parent li hover */
{
left: auto;
}

#Navigation li ul a /* Dropdown & flyout hyperlinks default state */
{
background: none;
border: 0 none;
margin-right: 0;
width: 160px;
box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}

#Navigation li li ul /* Flyout */
{
margin: -1px 0 0 200px;
width: 200px;
border-radius: 0 10px 10px 10px;
visibility:hidden;
}

#Navigation li li:hover ul /* Flyout on hover of parent li */
{
visibility:visible;
}

#Navigation ul ul li:last-child > a
{
border-radius:0 0 10px 10px;
}

#Navigation ul ul li:first-child > a
{
border-radius:0 10px 0 0;
}

#Navigation ul ul li:only-child > a
{
border-radius:0 10px 10px 10px;
}

/* set up the right arrows first */
#Navigation li > a:after
{
content:'\25B6';
float:right;
}

/* set up the downward arrow for top level items */
#Navigation > ul > li > a:after
{
content:'\a0\a0\a0\25BC' no-repeat 50%;
font: bold 12px Arial, Helvetica, Sans-serif;
/*position:relative;*/
/*top:10px;*/
}

/* clear the content if only child*/
#Navigation li > a:only-child:after
{
content: '';
}

The problem seems to be that if I set any position for the arrows in the dropdown it has a detrimental effect on the arrows in the horizontal menu (which otherwise are positioned just fine).

Unfortunately adding "no-repeat 50%" did not have the desired effect. I did however manage to force the position using position:relative; top:10px; Ideally however I do not want to use fixed units and can't see any reason why I should need to. If there is a better way of doing it I would be grateful for any input.