CSS - Centering Navigation Menu

Hi All:

Im having a difficult time trying to center a menu on my site. ANy help greatly appreciated.

Here is the temporary page margueritewedwardsartist. com / home1. htm

and here is the css code im using.
all i changed was thew text-align:center on the 2nd line. all other code was generated by the menu maker. Any help is greatly appreciated.

chris

-------------------

.bg {background: url(images/button4.gif);}
.menu {text-align:center; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursorointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

Hi,

I cannot get the main menu on this site to center correctly in Firefox:

Code is:

PHP Code:
#navcontainer {
    background: url(../../images/background_main_menu.jpg);
    height: 33px;
    width: 590px;
    font: 12px Verdana, sans-serif;
    
}

#navlist
{
    margin: 0;
    
}

#navlist ul, #navlist li
{
    margin: 0;
    display: inline;
    list-style-type: none;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
}

#navlist a:link, #navlist a:visited
{
    font-weight: bold;
    margin: 0 2px 4px 2px;
    text-decoration: none;
    color: #FFFFFF;
}

#navlist a:hover 
{ 
    color: #527D24; 
}



<div align="center">
        <div id="navcontainer">
            <ul id="navlist">
                <li style="padding-bottom: 14px;"><a href="index.php">home</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">about</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">services</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="links.php">links</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">gallery</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">contact</a></li>
            </ul>
        </div>
    </div> 

Well I have this code for my menu Code:

div.menu{
	align-text: center;
	float: left;
	background-color: #FFFFFF;
	color: #000000;
	border-top:0.1em solid #000000;
	border-right:0.1em solid #000000;
	border-bottom:0.1em solid #000000;
	height: 500px;
	width: 150px;
}

But It doesnt center the links. Here is the out put http://blacknine.dajoob.com/hhd/

Hello,

I have a vertical menu on the left hand side of my page that I'm working on.

I'm trying to center the text vertically in each box as some menu names take up two lines and are skewing the alignment.

Here's the code I'm using for the menu:

Code:

#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#menu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 10px;
}	

#menu li {
margin-bottom: 4px;  /* space between each menu item */
}

#menu li a {           /* text */

font-weight: bold;
height: 25px;  /* height of menu tabs */
text-decoration: none;
color: #505050;
display: block;
padding-left: 10px;
padding-top: 5px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}	
	
#menu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

If anyone could help me out that'd be great. Thanks!

I have a CSS dropdown menu with 1 sublevel which I want centered on my page. It looks fine when centered if I use Firefox, but in IE, the sublevels now pop out to the right of the main item and the 1st item doesnt show.

Here's my CSS for IE:

Code:

div.menu
{
position:relative;
height:30px;
display:block;
margin: 0 auto;
text-align:left;
}

ul.menu
{
top:0px;
left:0px;
position:relative;
padding:0px;
margin: 0 auto;
display:block;
float:left;
}

ul.menu li {
float:left;
}

ul.menu ul
{
position:relative;
margin:0px;
top:0px;
left:0px;
padding:0px;
display:block;
}

ul.menu ul li
{
display:inline;
float:none;
position:relative;
top:0px;
left:0px;
}

a.menu
{
display:block;
width:100px;
height:30px;
margin-top:-4px;
}
a.menu:hover
{
display:block;
}

And my HTML:

Code:

<body onload="MM_preloadImages('../Pictures/CoachesY.png','../Pictures/ScheduleY.png','../Pictures/RostersY.png','../Pictures/Sub Buttons/CoachHenriottY.jpg','../Pictures/Sub Buttons/CoachWitteY.jpg','../Pictures/Sub Buttons/CoachSchneiderY.jpg','../Pictures/Sub Buttons/CoachReevesY.jpg','../Pictures/Sub Buttons/FreshmanY.jpg','../Pictures/Sub Buttons/JVY.jpg','../Pictures/Sub Buttons/VarsityY.jpg','../Pictures/CampsY.png','../Pictures/SummerInfoY.png','../Pictures/LinksY.png','../Pictures/YouthInfoY.png','../Pictures/DirectionsY.png')" align="center">
<table width="690" align="center" bgcolor=#8560A9>
  <tr><td bordercolor="#FFFFFF" bgcolor="#8560A9">
<table width="690" border="0" align="center">
  <tr bgcolor="#FFFFFF" height="227">
    <td height="15" bgcolor="#8560A9"><div id="center"><img src="../Pictures/TitlePhoto.jpg" alt="Lady Elks Basketball" width="800" height="200" /><br />
	  <div class="menu">
   <ul class="menu">
      <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../Pictures/CoachesY.png',1)"><img src="../Pictures/CoachesP.png" name="Image1" width="100" height="30" border="0" id="Image1" /></a>
         <ul>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../Pictures/Sub Buttons/CoachHenriottY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachHenriottP.jpg" name="Image4" width="100" height="30" border="0" id="Image4" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../Pictures/Sub Buttons/CoachWitteY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachWitteP.jpg" name="Image5" width="100" height="30" border="0" id="Image5" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../Pictures/Sub Buttons/CoachSchneiderY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachSchneiderP.jpg" name="Image6" width="100" height="30" border="0" id="Image6" /></a></li>
			<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../Pictures/Sub Buttons/CoachReevesY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachReevesP.jpg" name="Image7" width="100" height="30" border="0" id="Image7" /></a></li>
         </ul>
      </li>
   </ul>
   <ul class="menu">
      <li><a class="menu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../Pictures/ScheduleY.png',1)"><img src="../Pictures/ScheduleP.png" name="Image2" width="100" height="30" border="0" id="Image2" /></a>
         <ul>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image8" width="100" height="30" border="0" id="Image8" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image9" width="100" height="30" border="0" id="Image9" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image10" width="100" height="30" border="0" id="Image10" /></a></li>
         </ul>
     </li>
   </ul>
   <ul class="menu">
      <li> <a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../Pictures/RostersY.png',1)"><img src="../Pictures/RostersP.png" name="Image3" width="100" height="30" border="0" id="Image3" /></a>
         <ul>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image13" width="100" height="30" border="0" id="Image13" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image12" width="100" height="30" border="0" id="Image12" /></a></li>
			<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image11" width="100" height="30" border="0" id="Image11" /></a></li>
         </ul>
      </li>
   </ul>
   <ul class="menu">
   	  <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','../Pictures/CampsY.png',1)"><img src="../Pictures/CampsP.png" name="Image14" width="100" height="30" border="0" id="Image14" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','../Pictures/SummerInfoY.png',1)"><img src="../Pictures/SummerInfoP.png" name="Image15" width="100" height="30" border="0" id="Image15" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','../Pictures/LinksY.png',1)"><img src="../Pictures/LinksP.png" name="Image16" width="100" height="30" border="0" id="Image16" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','../Pictures/YouthInfoY.png',1)"><img src="../Pictures/YouthInfoP.png" name="Image17" width="100" height="30" border="0" id="Image17" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','../Pictures/DirectionsY.png',1)"><img src="../Pictures/DirectionsP.png" name="Image18" width="100" height="30" border="0" id="Image18" /></a></li>
   </ul>
</div><br />
    </div>	</td>
    </tr>
	  </table>
</td></tr></table>
</div>
</body>

Any help would be appreciated.

First of all, this is my first post, so take it easy on me if I do something wrong

Onto the problem...

I'm trying to center my CSS navigation menu. I'm probably making a completely moronic mistake, but I've been trying to figure this out for quite some time now to no avail. I've managed to ALMOST do it, but there's something wrong, and it's probably something minor.

(Please excuse the sloppy coding; I'm just beginning to design the layout)

HTML:
Code:

  <div id="navigation">
       <ul id="navigation">
           <li><a href="page1.html" target="_self" title="Home" class="current">Home</a></li>
           <li><a href="about.html" target="_self" title="About">About</a></li>
           <li><a href="solutions/solutions.html" target="_self" title="Solutions">Solutions</a></li>
           <li><a href="clients/clients.html" target="_self" title="Clients">Clients</a></li>
           <li><a href="faq/faq.html" target="_self" title="FAQ">FAQ</a></li>
           <li><a href="contact/contact.html" target="_self" title="Contact">Contact</a></li>
    </ul></div>
  <!-- end #navigation -->

CSS:
Code:

}
.twoColLiqRtHdr #navigation { 
	height: 37px; 
	background: #FFF url("images/menu-bg-yellow-orig.gif") repeat-x; 
	font-size: .9em; 
	font-family: "Lucida Grande", Verdana, sans-serif; 
	font-weight: bold;  
	margin-left: 0; 
	padding: 0;
}
#navigation ul, #navigation ul li {
     list-style: none;
     margin: 0;
     padding: 0;
 }
.twoColLiqRtHdr #navigation ul {
	height: 37px; 
	margin: 0; 
	padding: 0;
	text-align: center;
} 
.twoColLigRtHdr #navigation ul li {
	display: inline-block;
}
.twoColLiqRtHdr #navigation ul li a {
	color: #777;  
	text-decoration: none;
	padding: 2px 10px 0px;
	height: 37px;
	line-height: 200%;
	margin: 0;
	display: inline-block;
}
.twoColLiqRtHdr #navigation ul li a:hover { 
	color: #333; 
}
.twoColLiqRtHdr #navigation ul li a.current { 
	color: #CC0A00;
	background: #FFF url("images/current-bg-yellow.gif") repeat-x; 
	padding: 2px 10px 0px; 
	display: inline-block;
}
/*\*//*/
#navigation ul li a {
	display: inline-block;
	white-space: nowrap;
	width: 1px;
}

#navigation ul {
	padding-bottom: 0;
	margin-bottom: -1px;
}
/**/

/*\*/
html #navigation ul li a {
	padding: 0;
}
/**/

This is the result of my current coding:

http://i75.photobucket.com/albums/i320/blockbusted/cssmenuproblem.jpg

If anyone can shed some light on this problem of mine, I would greatly appreciate it! THANKS!

(P.S. I know the CSS doesn't validate; I just validated it and I'm still having the same problem.)

Hi
I hope this is going to be a simple question!!
I have used the suckerfish menu and all I would like to do is have the menu in the center of the page with a blue border extending from the sides of the menu to the edge of the page.

The page can be viewed on http://uk.geocities.com/g_foxon/example1.htm

cheers
Wistar

I want to make a left side navigation menu that nested menus popup beneath the parent menu when click the parent menu, submenus will be closed when clicks parent menu again
How can do that using css and html?

Hello,
I want to create Vertical Navigation menu with pure CSS.

Navigation menu will have main menus name. When user click on any of main menu, it should open list of sub-menu under same navigation(menubar). i mean like tree naviation but sub-menus should open under same menus. Navigation menu is vertical menus.

Example:
please go to : http://www.projectseven.com/tutorials/navigation/swapclassmenu/index.htm

Under Overview:How it works section: Please click on See the finished SwapClass menu link.

In that page they have left hand side vertical nav-menu with sub-menus open under same navbar.

I want to create like above example.

Is there any tutorials or open source for this?

Thank you,
tec

Hello,

I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover.

My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions.

Does anyone know if its possible to anchor a layer to a point from something on a different z-index?

I did a search on the forums here and found a similar question but no responses.

Thanks guys!

Link: http://ajwells.org/mtmp/index.html

How do I get the menu there to center on the screen? Ive tried a number of things and nothings worked as of yet.

Or better yet, is there an easy way to make the menu on the left side going downward rather than left to right?

Either would be great.

thanks for the help.

Let me start by saying I'm a PHP/MySQL guy, not a designer. I know enough CSS to get by, but my focus has been the data side, not the design side. Hell I usually just use tables so I don't have to mess with any of this crap. I guess it's come to the point where I need to update my design skills or be left in the dust (since you can outsource LAMP guys for $4 a friggin' hour now )

I'm using the pretty standard UL-LI menu set to display vertically. Now I've added a couple links and it's too big for one line if I want to maintain style at 800 x 600. I figured the easiest way was to let it wrap to 2 lines. It wraps fine, but everything is either left aligned or right. I'd like both of the rows to be centered. Is there an easy way to do this?

Here's the general layout:
PHP Code:
// .main is the style for the container
// #main is the positioning of this instance of main
// .tree_menu_list is the vertical stuffs
<div class="menu" id="main">
   <ul class="tree_menu_list">
      <li><a href="index.php">Home</a></li>
      <li><a href="index.php?p=vision">Vision</a></li>
      <li><a href="index.php?p=buying">Buying</a></li>
      <li><a href="index.php?p=renovation">Building</a></li>
      <li><a href="index.php?p=selling">Selling</a></li>
      <li><a href="index.php?p=payout">Payout</a></li>
      <li><a href="index.php?p=opportunities">Opportunities</a></li>
      <li><a href="index.php?p=services">Services</a></li>
      <li><a href="images.php">Photos</a></li>
   </ul>
</div> 

Hello All,

I am trying to get a "horizontal menu" in CSS to properly center in my "#topbar" dev which is basically a header that is 100% width of the page. I have the website name, then the menu which is to be centered directly below it.

I have searched google for hours and found one website (I guess cause i'm new it won't let me put the url in here) and it broke down each section of the CSS and it says that to horizontally position the menu just add text-align: center; to the #tabsE ul section, but that doesn't change anything at all. I have also tried replacing the float values with margin-left: auto; and margin-right: auto; (I've used those to center images before) and that just destroys the menu (it all shifts to the right side of the screen, and spaces out vertically).

I am really kind of stuck here, I'm pretty new to CSS and most the basics are clicking, it seems to me that centering items so far has been one of the biggest pains yet.

Here is the CSS:
Code:

/*- Menu Tabs E--------------------------- */

    #tabsE {
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }

    #tabsE ul {
        margin:0;
        padding:10px 10px 0 0px;
        list-style:none;
      }

    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }

    #tabsE a {
      text-align: center;
      background:url("tableftE.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }

    #tabsE a span {
      text-align: center;
      display:block;
      background:url("tabrightE.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#000;
      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#FFFFFF;
      }
    #tabsE a:hover {
      background-position:0% -42px;
      }
    #tabsE a:hover span {
      background-position:100% -42px;
      }

        #tabsE #current a {
                background-position:0% -42px;
        }
        #tabsE #current a span {
                background-position:100% -42px;
        }

I tried to post the HTML (its just a standard <ul> with list </ul>) but it won't let me, because it contains url's so, I can e-mail you that if neccesary.

I truly appreciate any help you can offer.

Thanks,

Chris

I have a CSS, drop-down navigation menu for my company's site, at the top of every page: http://www.mediamogulsweb.com/.

It works fine in Firefox and IE6.

At first it seems to work in IE7. But if you mouse over the pop-out menus a few times, you'll notice that every so often the menu breaks (in IE7).

My guess is that it has to do with the display property set for the embedded unordered lists in the menu. But I have "display" set to "none", so it seems like I shouldn;t be having this problem.

Can anyone help? thanks...

I'm working with a superfish menu. I re-colored the images and replaced them with the old images in the css. For some reason, the menu-btn_rtur is not showing up. I want it there when the menu is inactive, like you see right when you go to the home page. At some obvious points, it will need the sub indicator arrow. My client wants to launch today, so I'm really under the gun and need help-- eternally grateful to anyone who responds. Smile

Site Link:staging.phantasea.net/cpi/
CSS I added:
Code:

#navigation-menu ul.sf-menu > li > a {
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-btn_rtur.png) top right no-repeat;
    display: block;
    padding: 0 20px 0 0;
    color: #ffffff;
    text-decoration: none;
    border:0 none;
    cursor: pointer;
}

#navigation-menu ul.sf-menu > li > a > span {
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-btn_ltur.png) top left no-repeat;
    display: block;
    padding: 10px 0 10px 20px;
    color:#FFF;
    line-height:22px;
}

#navigation-menu ul.sf-menu > li > a.sf-with-ul {
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-with-arrow-btn_rtur.png) top right no-repeat;
    padding: 0 26px 0 0;
}

#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator {  /* give all except IE6 the correct values */
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
    padding: 10px 0 10px 0;
}

#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
    background: url(../images/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
}

ORIGINAL CSS:
Code:

/* Begin Main Navigation Menu */
#navigation-menu {
    position:absolute;
    right:20px;
    top:5px;
    font-size:14px;
    height:40px;
}
.navigation-menu {
    position:relative;
    z-index:22;
}
#main-menu {
    background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;
    width: 100%;
    position:relative;
    z-index:101;
    height:56px;
    margin-bottom:-6px;
}
#dropdown-holder {
    display: block;
    position:relative;
}
#navigation-menu > ul {
    padding-top: 7px;
}
#navigation-menu > * {
    padding:0;
    margin:0;
    font-size: 1em;
}
#navigation-menu ul.sf-menu {
    padding: 10px 0 0 0;
}
#navigation-menu ul.sf-menu > li {
    background:none;
    list-style: none;
    float: left;
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu a.default-cursor {
    cursor: default;
}
#navigation-menu ul.sf-menu > li > a {
    background: url(../images/menu-btn_r.png) top right no-repeat;
    display: block;
    padding: 0 20px 0 0;
    color: #E8E8E8;
    text-decoration: none;
    border:0 none;
    cursor: pointer;
}
#navigation-menu ul.sf-menu a {
    line-height: 1.2em;
    padding:8px 16px;
}
#navigation-menu ul.sf-menu a > span.sf-sub-indicator {
    top: 17px !important;
}
#navigation-menu ul.sf-menu ul a > span.sf-sub-indicator {
    top: 0.9em !important;
}
#navigation-menu ul.sf-menu > li > a > span {
    background: url(../images/menu-btn_l.png) top left no-repeat;
    display: block;
    padding: 10px 0 10px 20px;
    color:#FFF;
    line-height:22px;
}
#navigation-menu ul.sf-menu > li {
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
    background: url(../images/menu-with-arrow-btn_r.png) top right no-repeat;
    padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul:hover {
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
    padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator {  /* give all except IE6 the correct values */
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
    padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li > a:hover {
    background: url(../images/menu-active-btn_r.png) top right no-repeat;
    color: #FFF;
    text-decoration: none;
}
#navigation-menu ul.sf-menu > li > a:hover span {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #555;
}

#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
    background: url(../images/menu-active-btn_r.png) top right no-repeat;
    color: #6A6A6A;
    text-decoration: none;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span,
#navigation-menu ul.sf-menu > li.current_page_item > a > span {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #00717D;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover,
#navigation-menu ul.sf-menu > li.current_page_item > a > span:hover {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
}


/* End Main Navigation Menu */