Horizontal CSS Meny med flere sub menyer, nesten i mål

[Sennepo]

Hei, nå har jeg sittet og sturet med noen forskjellige meny systemer ved bruk av CSS siden torsdag. Det jeg sliter med nå, hvor jeg ikke kommer lenger er når jeg skal ha flere sub menylinjer og de skal ha forskjellige properties enn hovedmenyen.

 

Jeg har lagt ut meny koden min på fiddle slik at dere kan se og teste ut litt:

Fiddle

 

Her sitter jeg fast:

1.

#menu-bar ul ul li:hover a

Skriver over: #menu-bar ul ul ul li

Dette gjør slik at jeg ikke får svart skrift og hvit skygge på subsub menyen i menystrukturen min.

 

2.

Hele strukturen for den aktive siden i meny strukturen.

 

Slik skal det se ut:

- subsub menyen skal se lik ut som sub menyen (slik sub menyen er nå)

- den aktive menystrukturen skal være lik som de andre, kun være merket i topnivået som alltid vil være synlig.

----------------------

 

Håper det er noen kjappe hoder her som kan mye om css menyer og klarer å hjelpe meg til en ferdig meny Greit og få noen kommentarer også kanskje?

 

Mulig koden er ganske rotete i css, men dette kommer først og fremst av at jeg nettopp har startet med menystruktur i css. Så jeg forstår den, men har ikke helt kommet ditt hvor jeg klarer å sortere den riktig.

[herdon]

1.

#menu-bar ul ul li:hover a

Betyr egentlig bare at du hover

#menu-bar ul ul li

Dermed skriver den over.

 

PS: Jeg har bare lest på CSS siste uken, og jeg kunne med en gang si det, tror du burde lese litt mer på CSS hvis du ikke skjønte at den skrev over.

[Sennepo]

1.

#menu-bar ul ul li:hover a

Betyr egentlig bare at du hover

#menu-bar ul ul li

Dermed skriver den over.

 

PS: Jeg har bare lest på CSS siste uken, og jeg kunne med en gang si det, tror du burde lese litt mer på CSS hvis du ikke skjønte at den skrev over.

 

Problemet er at #menu-bar ul ul li:hover a skriver over #meny-bar ul ul ul a som er neste ul gren (3.) i html koden.

[Flugg]

#menu-bar ul ul li:hover a finner ALLE ul tags, hvis du kun vil gå et tre ned om gangen må du bruke "child selector":

 

#menu-bar > ul > ul > li:hover a

 

PS: tidligere versjoner av IE forstår ikke :hover på andre elementer enn a tags.

[Crowly]

Hvis du ikke gjør dette for å lære hvordan man lager en slik meny, kan det være litt jobb å spare på jQuery-UI sin løsning: http://jqueryui.com/menu/ (hvis den dekker ditt behov). Tabs er muligens også noe som kan passe: http://jqueryui.com/tabs/