[XHTML/CSS] Problem z rozwijanym menu

Witam mam problem ze zrobieniem rozwijanego menu. Najpierw zrobiłem zwykłe menu i patrząc na jakiś przykład chciałbym go rozwinąć w jednym odnośniku “Prace”, ale nie mogę sobie z tym poradzić (inne hierarchia: klasy itp.). Chciałbym, żeby przy najechaniu myszką na “Prace” menu się rozwinęło z tym samym tłem.

Całe menu wygląda tak, a tutaj tło menu menuback.png.

Kod jest wyjęty z całości dlatego #menu ma width, height, itd.

XHTML

  • O Mnie
  • Prace
  • Oferta
  • Kontakt
  • Blog

[/code] CSS

[code] #menu { width: 539px; height: 105px; float: left; margin-left: 20px; } .nav li { float: left; display: block; list-style-type: none; } .nav li a:link, .nav li a:visited { width: 66px; height: 23px; color: #428abe; text-align: center; font-size: 11pt; font-family: “Verdena”; display: block; margin: 40px 0 0 10px; padding: 5px 1px 0 0; } .nav .only a { background: url(layout/menuback.png) no-repeat; } .nav li a:hover { color: #4fa34a; background: url(layout/menuback.png) no-repeat; }

Z góry dziękuję za pomoc.

http://devinrolsen.com/wp-content/theme … WORKS.html

http://phoenity.com/newtedge/

http://www.seoconsultants.com/css/menus/tutorial/

Wiem, że przykładów jest bardzo dużo, no i ja właśnie na podstawie tego próbuję zmienić moje menu. Problem polega na tym, że ja mam inną strukturę w xhtml i coś mi właśnie nie wychodzi. Pokombinuję jeszcze trochę, bo najlepiej się uczyć metodą prób i błędów. Jeśli nie da to efektów to zmienię hierarchię jak z przykładów. Tak to proszę o pomoc, bo nie daje mi to spokoju :).

Proszę za bardzo nie zwracać uwagi na pozycjonowanie, wiem, że można byłoby to lepiej zrobić, ale wynika to z tego, że jestem początkujący :).

Całość wygląda tak.

Poniżej cały kod.

HTML

logo.png
Line

  • O Mnie
  • Prace
  • Oferta
  • Kontakt
  • Blog

[/code] CSS

[code]* { margin: 0; padding: 0; } img { border: 0; } a { text-decoration: none; } #header { width: 100%; height: 105px; background: url(layout/header.png); } #center { width: 1000px; margin: 0 auto; } #logo { width: 420px; height: 105px; float: left; } #line { width: 21px; height: 105px; float: left; } #menu { width: 539px; height: 105px; float: left; margin-left: 20px; } .nav li { float: left; display: block; list-style-type: none; } .nav li a:link, .nav li a:visited { width: 66px; height: 23px; color: #428abe; text-align: center; font-size: 11pt; font-family: “Verdena”; display: block; margin: 40px 0 0 10px; padding: 5px 1px 0 0; } .nav .only a { background: url(layout/menuback.png) no-repeat; } .nav li a:hover { color: #4fa34a; background: url(layout/menuback.png) no-repeat; } #content { width: 100%; height: 302px; margin: 0 auto; clear: both; background: url(layout/content.png); } #center2 { width: 1000px; margin: 0 auto; }