меню, hover ефект

tini4ka

Registered
Имам следното меню

<div id="topmenu">
<ul>
<li>
<a class="active" title="Научете повече за Iwa Style" href="#">Начало</a>
</li>
<li>
<a title="Колекцията на Iwa Style" href="#">Колекция</a>
</li>
<li>
<a title="Модни тенденции" href="#">Тенденции</a>
</li>
<li>
<a title="Аксесоари" href="#">Аксесоари</a>
</li>
<li>
<a title="нещо си...." href="#">гхфхгфхг</a>
</li>
<li>
<a title="Как да се свържете с Iwa Style" href="#">Контакти</a>
</li>
</ul>
</div>


и стилове:
#topmenu{
background: url('images/topmenu-img.png') repeat-x;
height:59px;
}

#topmenu ul{
margin:0;
padding:0;
list-style:none;

}
#topmenu ul li{
float:left;

}

#topmenu ul li a{
text-decoration:none;
color:#f3e0f3;
text-align:center;
font-weight: bold;
font-size:30px;
font-family: sladkoeshka,Arial,Helvetica,sans-serif;
margin:0 10px 0 17px;
}

#topmenu li a:hover, #topmenu li a.active {
background-color: #f3e0f3;
color:#5b5a5a;
}

и имам следния проблем, activ не е центрирано, а избутано нагоре и как трябва да стане да не е широк колкото текста, а малко по-голям
 
При мен менюто е ок, как така active не е центрирано.
Пробвай така.
#topmenu{
background: url('images/topmenu-img.png') repeat-x;
height:59px;
margin-top:20px;
}

#topmenu ul{
margin:0;
padding:0;
list-style:none;

}
#topmenu ul li{
float:left;
margin:0 10px;
}

#topmenu ul li a{
text-decoration:none;
color:#f3e0f3;
text-align:center;
padding:7px;

font-weight: bold;
font-size:30px;
font-family: sladkoeshka,Arial,Helvetica,sans-serif;
margin: 10px 0 17px;
}

#topmenu li a:hover, #topmenu li a.active {
background-color: #f3e0f3;
color:#5b5a5a;
}
 

Горе