menu css

need help in the menu bar

when i hover with the mouse the a element move aside ;
who i can fix it ?

http://jsbin.com/eguhuy/1/edit

 

Most of your problem is you are adding border to an element that doesn't have a border, changing it's size. The best solution is to add padding to the unhovered version, then remove that padding on hover.

Though I'm stuck wondering why you have the extra DIV around the menu for nothing, why you're not turning off bullets, why you're floating the LI given IE8's staircase bug, are using a serif font for screen, have an incomplete font-family, and are NOT setting inline-block or float on the anchors. (I'd use the former)... Also I REALLY hope that 10px font-size is just for testing, given that such an absurdly undersized fixed metric font is an accessibility train wreck.

So... to 'fix' that, I'd have something like:

<ul id="menu">
	<li><a href="#">HOME</a></li>
	<li><a href="#">ABOUT AUREUS</a></li>
	<li><a href="#">BLOG</a></li>
	<li><a href="#">SUPPORT</a></li>
	<li><a href="#">F.A.Q</a></li>
	<li><a href="#">CONTACT</a></li>
</ul>

Code (markup):

with this CSS:

#menu {
	list-style:none;
	font:normal 14px/16px "myriad pro",times,serif;
}

#menu li {
	display:inline; /* basically strips formatting off these */
}

#menu li a {
	display:inline-block;
	text-decoration: none;
	padding:4px 8px;
	color: #AAA;
}

#menu li :hover{
	padding:2px 6px;
	border:2px ridge #FFF;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px; /* == padding + 1/2 line-height */
}

Code (markup):

Oh, and given that 'ridge' is unreliable/inconsistent cross-browser, I'd probably use multiple box-shadow instead along with a background-color change for older browsers without CSS3 support.

 

thank you it help,