Adding arrows to a menu

[alhermette]

I have a horizontal menu with dropdowns that is three levels deep. It is a sytled unordered list.

So far it is all working fine but I wanted to add some arrows to any element that contains child elements to make it more intuitive.

I added the following code:

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

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

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

This works well, the horizontal menu has downward pointing arrows in all the right places and the dropdown has right pointing arrows in all the right links.

The problem is that the right pointing arrows in the dropdown appear immediately after the hyperlink. In order to look right I need to basically right align them.

I tried amending the code like this:

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

The right pointing arrows in the dropdown are now perfectly aligned just as I want them. The problem is that the downward pointing arrows in the horizontal menu have just dissappeared. . .

it seems to be the position: absolute; that is causing the problem but I can't think of any other way of aligning the arrows (whilst leaving the hyperlink text left aligned) and I'm not sure why it is having this effect.

[SevenCubed]

It would take a lot to write out a menu in html to test this and your OP is a wee bit confusing (for me) but you can always try this quick and dirty method it might work:

<span style="float:right;">The Arrow You Want To Hang Right</span>

[alhermette]

Update

I amended the code to this:

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

Now the right pointing arrows appear correctly in the dropdown. The downward pointing arrows in the horizontal menu are there but seem to have taken on a vertical alignment of top for some reason and nothing that I have tried has managed to bring them back to the middle.

the height of the menu bar is set by applying line-height:35px; to the hyperlinks contained in it.

[SevenCubed]

Sorry I don't think I'm really understanding your issue here. But it appears my first suggestion worked but now you have another problem with vertical alignment? This is just a wild shot in the dark because I'm not able to visualize what you are asking but I think maybe I understand so how about adding this to your other one:

#Navigation > ul > li > a:after
{
content:'\a0\a0\a0\25BC' no-repeat 50%;
font: bold 12px Arial, Helvetica, Sans-serif;
}

[alhermette]

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.