Menu CSS

Dla specjalistów Webmastering
#1

Witam

ostatnio postanowiłem zrobić sobie stronę www znalazłem ładny szablon który muszę troszkę przerobić mianowicie chodzi o menu. Próbowałem już przerabiać to menu ale wszystkie moje starania kończą się fiaskiem. Dlatego proszę o pomoc. Kod menu wygląda tak:

  • link1
  • link2
  • link3
  • link4

[/code] a to css:

[code] ul.navbar { list-style-type:none; float:left; display:block; width:100%; line-height:1.5em; clear:both; margin:0; padding:0; background-color:#ff8000;} ul.navbar li { display:inline;} a.nav:link, a.nav:visited { display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0; text-decoration:none; background-color:#ff8000; color:#FFFFFF;} a.nav:hover { display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0; text-decoration:none; background-color:#ff8000; color:#FFFFFF;} a.nav:active { display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0; text-decoration:none; background-color:#ff8000; color:#FFFFFF;}

Moje pytanie brzmi co muszę zmienić aby menu rozwijało się tak jak tohttp://cyg.ovh.org/tutoriale/css_menu_rozwijane.htm

#2

HTML:

  • rodzic1

  • rodzic2

    • dziecko1

      • wnuczek1
      • wnuczek2
      • wnuczek3
      • wnuczek4
    • dziecko2
    • dziecko3
      [/code] CSS:

[code]ul.nav { margin: 0; padding: 0; list-style: none; position: relative; } ul.nav ul { width: 180px; /* szerkosc dziecka */ margin: 0; list-style: none; display: none; position: absolute; top: 100%; left: 0; } ul.nav ul ul,ul.nav ul ul ul { top: 0; left: 100%; } ul.nav li { float: left; display: inline; position: relative; } ul.nav ul li { width: 100%; display: block; } /* poziom rodzicow */ ul.nav a { border-top: 1px solid #FFF; border-right: 1px solid #FFF; padding: 6px; float: left; display: block; background: #ff8000;; color: #fff; font: bold 11px Arial, sans-serif; text-decoration: none; height: 1%; } /* wlasciwosc hover menu rodzicow */ ul.nav a:hover,ul.nav li:hover a,ul.nav li.iehover a { background: #ff8000; color: #FFF; } /* 2 poziom */ ul.nav li:hover li a,ul.nav li.iehover li a { float: none; background: #BBB; } /* 2nd poziom wlasciwosc hover */ ul.nav li:hover li a:hover,ul.nav li:hover li:hover a,ul.nav li.iehover li a:hover,ul.nav li.iehover li.iehover a { background: #999; } /* 3 poziom */ ul.nav li:hover li:hover li a,ul.nav li.iehover li.iehover li a { background: #999; } /* 3 poziom wlasciwosc hover */ ul.nav li:hover li:hover li a:hover,ul.nav li:hover li:hover li:hover a,ul.nav li.iehover li.iehover li a:hover,ul.nav li.iehover li.iehover li.iehover a { background: #666; } /* 4 poziom */ ul.nav li:hover li:hover li:hover li a,ul.nav li.iehover li.iehover li.iehover li a { background: #666; } /* 4 poziom wlasciwosc hover */ ul.nav li:hover li:hover li:hover li a:hover,ul.nav li.iehover li.iehover li.iehover li a:hover { background: #333; } ul.nav li:hover ul ul,ul.nav li:hover ul ul ul,ul.nav li.iehover ul ul,ul.nav li.iehover ul ul ul { display: none; } ul.nav li:hover ul,ul.nav ul li:hover ul,ul.nav ul ul li:hover ul,ul.nav li.iehover ul,ul.nav ul li.iehover ul,ul.nav ul ul li.iehover ul { display: block; }

Napisane prosto i zrozumiale.