ایجاد منو

[e_a_23]

سلام
من یک منو درست کردم اما در منظم کردن اون دچار اشکال شدم. مشکل اصلیم اینه که hover حرکت می کنه کمی و دقیقا در جایی که باید باشه نیست. یه مقدار می دونم بد نوشتم اما لطفا یادم بدین واسه این margin و padding ها باید چیکار کنم.


<div class="menu">
<ul>
<li class="menuItem firstItem"><a href="#">هتل کده</a></li>
<li class="menuItem mrgRight"><a href="#">لیست هتل ها</a></li>
<li class="menuItem"><a href="#">عضویت مسافران</a></li>
<li class="menuItem"><a href="#">راهنمای رزرو اتاق</a></li>
<li class="menuItem mrgRight margin"><a href="#">محدوده اعضا</a></li>
<li class="menuItem lastItem"><a href="#">ارتباط با ما</a></li>
</ul>
</div>


.menu
{
width: 980px;
height: 40px;
float: right;
background: url("../Images/gradient.jpg") repeat-x;
border: solid 1px #fff;
border-radius: 5px;
margin-top: 3px;
}
.menuItem
{
background: url("../Images/spliter1.png") no-repeat left center;
width: 150px;
height: 30px;
float: right;
margin-top: 7px;
}
ul li a
{
font: 14px tahoma;
text-decoration: none;
color: #fff;
text-align: center;
float: right;
margin-top: 3px;
margin-right: 20px;
}
.firstItem
{
margin-right: 45px;
}
.mrgRight
{
margin-right: 12px;
}
.margin
{
margin-right: 10px;
}
ul li a:hover
{
background: url("../Images/hover1.png") no-repeat top center;
border-radius: 4px;
width: 100%;
height: 40px;

color: #333;

}
.lastItem
{
background: none;
margin-right: 10px;
}

116768

[mrabdollahi]

margin-top تگ a و MenuItem رو بردار و جای جای اون به تگ a
line-height:35px بده