[solved] :hover -> bold i poziome menu, czyli jak zapobiec rozszerzaniu elementu po najechaniu Opcje

[sowiq]

Witam,
pytanie może wydawać się głupie, zwłaszcza jeśli pochodzi od kogoś zajmującego się tematem od jakiegoś czasu, ale kto pyta, nie błądzi.

Mam proste menu:

[HTML] pobierz, plaintext 
<ul class="menu">
	<li><a href="#">menu 1</a></li>
	<li><a href="#">menu 2</a></li>
	<li><a href="#">menu 3</a></li>
	<li><a href="#">menu 4</a></li>
</ul>
[HTML] pobierz, plaintext 

i CSS:

[HTML] pobierz, plaintext 
ul.menu{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
ul.menu li{
	display: block;
	float: left;
	padding: 3px;
}
ul.menu li a{ font-weight: normal; }
ul.menu li a:hover{ font-weight: bold; }
[HTML] pobierz, plaintext 

Czyli ni mniej, ni więcej, tylko menu w układzie poziomym.

Moje pytanie brzmi: co muszę zrobić, żeby menu nie rozszerzało się po najechaniu kursorem na jakiś element? Chodzi o to, że jeśli link zostanie pogrubiony, to zmienia swoją szerokość 'rozpychając' na boki swojego rodzica, a ten sąsiednie elementy.

Od razu powiem, że nie mogę nadać elementom stałej/min/max szerokości, bo nie wiem co w nich będzie (różne języki menu definiowane z panelu admina).

Z góry dzięki za wszelkie podpowiedzi (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował sowiq 22.12.2008, 12:32:33

[Crozin]

jakimś tam rozwiązaniem jest dodanie w JS do zdarzenia mouseover funkcji, która ustawi elementowi szerokość równą offsetWidth - padding i do zdarzenia mouseout funkcje, która poprostu wywali właściwość width.

Użycie tutaj JS nie stworzy żadnych problemów - w przypadku jego braku co najwyżej "poskacze".
W samym CSS raczej ciężko będzie to uzyskać nie mając możliwości ustawienia stałej szerokości elementu - może jakaś zabawa z wywalaniem tekstu poza documentFlow przy :hover, ale to IMHO przerost formy nad treścią (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)