Hi all i am trying to edit a css menu and want to get the links in the center rather than aligned to the left.

 

The css is below is it at all possible you could tell me what i need to change/add to achieve this.

 

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;

}
.menu ul{
background:#A9D049;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
	float:left;
	padding:0px;
	}
.menu li a{
	background:#A9D049 url("images/menu/seperator.gif") bottom right no-repeat;
	color:#FFFFFF;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	padding:0px 10px;
	text-align:center;
	text-decoration:none;
	}
	.menu li a:hover, .menu ul li:hover a{
		background: #333333 url("images/menu/hover.gif") bottom center no-repeat;
		color:#FFFFFF;
		text-decoration:none;
		}
.menu li ul{
	background:#333333;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:225px;
	z-index:200;
	/*top:1em;
	/*left:0;*/
	}
.menu li:hover ul{
	display:block;

	}
.menu li li {
	background:url('images/menu/sub_sep.gif') bottom left no-repeat;
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:225px;
	}
.menu li:hover li a{
	background:none;

	}
.menu li ul a{
	display:block;
	height:35px;
	font-size:12px;
	font-style:normal;
	margin:0px;
	padding:0px 5px 0px 5px;
	text-align:left;
	}
	.menu li ul a:hover, .menu li ul li:hover a{
		background:#A9D049 url('images/menu/hover_sub.gif') center left no-repeat;
		border:0px;
		color:#ffffff;
		text-decoration:none;
		}
.menu p{
	clear:left;
	}	

I've never needed to centrally align an LI before so I'm guessing...firstly, applying the centre style to 'li a' won't work as you've done. I think you'd be better off trying to set the left & right margins to auto on the li itself - see if that works, if not you could try putting the central text align on the li as well.

Sadly none of those worked it seems that nothing will center it :-(

Which level are you trying to center?

 

The top level .menu li tags have float: left which should put them side by side and the top level .menu li a style has text-align: center; so the link text should already be centered inside.

 

The drop down level li tags don't have float: left so they should be one above the other and the drop down level .menu li ul a style has text-align: left; so perhaps you need to change this to text-align: center; and you might have to add in li to that style like this:-

.menu li ul li a{
	display:block;
	height:35px;
	font-size:12px;
	font-style:normal;
	margin:0px;
	padding:0px 5px 0px 5px;
	text-align:center;
	}

I was trying to align top level to center if i change that align left it aligns submenu center which i don't want

Your top level links should already be centered with this code:-

.menu li a{
	background:#A9D049 url("images/menu/seperator.gif") bottom right no-repeat;
	color:#FFFFFF;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	padding:0px 10px;
	text-align:center;
	text-decoration:none;
	}

 

If it isn't working, perhaps you should give a link to your online page for someone to check elsewhere.