dynamiczne menu, 3 drobne pytania i prośba o ocene kodu Opcje

[Jarod]

EDIT całego:


Zrobiłem sobie menu na podstawie przykładu znalezionego na googlu. Dodam, że robie menu kolorystycznie i w sposobie działania takie jak na http://www.sonystyle.com/is-bin/INTERSHOP....torefront-Start

(Warto zobaczyć, żeby wiedzieć co chce uzyskać)
Już prawie jest dobrze ale mam 3 problemy...

1. Mam główne przyciski (wycięte grafiki). Problem w tym, że każdy przycisk jest innej długości i troszke się różni, więc mój kod (który jest poniżej) odpada.. Odpada bo stosuje tego samego buttona do wszystkich a ja mam 6 różnych. Jak mógłbym to zmienić?

2. Nie wiedziałem jak zrobić podmiane grafik za pomocą css, więc użyłem kodu:

Kod

<a href="#" onMouseOver="document.obrazek.src='layout/odziez2.gif'" onMouseOut="document.obrazek.src='layout/odziez.gif'"><img src="layout/odziez.gif" width="?" height="?" name="obrazek" border="0"></a>

ale nie wiem czy to jest zgodne z XHTML? Może jest lepszy sposób całkowicie oparty o css?

3. Menu rozwijane po najechaniu na button jest szerokości 10em (tak było w tym przykładzie ze strony). Jest równej szerokości co dany buton a ja chciałbym żeby było troszke szersze (tak jak na stronie sony). Ale niezależnie jaką szerokość ustawie to jest zwiększane o szerokośc sąsiedniego butoona.

Jak sobie z tym poradzić?

HTML:

[HTML] pobierz, plaintext 
<div id="bloknawigacji">
                 <ul id="nav">
                     <li><!--<a href="#" onMouseOver="document.obrazek.src='layout/odziez.gif'" onMouseOut="document.obrazek.src='layout/odziez2.gif'"><img src="layout/odziez.gif" style="width:75px; height:39px; border:0;" /></a>-->
						 <a href="#" onMouseOver="document.obrazek.src='layout/odziez2.gif'" onMouseOut="document.obrazek.src='layout/odziez.gif'"><img src="layout/odziez.gif" width="?" height="?" name="obrazek" border="0"></a>                         
						 <ul>
                             <li><a href="#">Test 00000000001</a></li>
                             <li><a href="#">Test 00000000002</a></li>
                             <li><a href="#">Test 00000000003</a></li>
                             <li><a href="#">Test 00000000004</a></li>
                         </ul>
	                 </li>
 
                     <li><a href="#"><img src="layout/odziez.gif" style="border:0;" /></a>
		                 <ul>
                             <li><a href="#">Test 00000000001</a></li>
                             <li><a href="#">Test 00000000002</a></li>
                             <li><a href="#">Test 00000000003</a></li>
                             <li><a href="#">Test 00000000004</a></li>
                             <li><a href="#">Test 00000000005</a></li>
                         </ul>
                     </li>
                 </ul>
			 </div>
[HTML] pobierz, plaintext 

CSS:

Kod

.bloknawigacyjny {
                  background-color: red;
                  width: 100%;
}

#nav, #nav ul {
               padding: 0;
               margin: 0;
               list-style: none;
               font-size: 14px;
               font-weight: bold;
}

#nav a {
        display: block;
}

#nav li {
         float: left;
         width: 75px;
         background-image: url(../layout/odziez.gif);
}

#nav li ul {
      position: absolute;
            width: 10em;
            left: -999em;
}

#nav li ul li {
               background-image: none;
               background-color: #F9F9F9;
}

#nav li ul li:hover {
                     background-color: #99CC33;
}

#nav li:hover ul {
                  left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
                                      left: auto;
}