Hjelp til enkel redigering av CSS

[Gullars]

Hei!

 

Eg er heilt blank når det gjeld CSS, og har følgjande problem:

 

Eg skal laga ein meny basert på Son of Suckerfish. Gå til denne sida for å sjå døme og kode som er brukt: http://www.invokemedia.com/css-dropdown-me...-wordpress.html

 

Her vil eg gjera ei lita endring. Hald musa over "About us" på ovanfornemnte side. Eg vil at "Jobs" og "People" skal koma horisontalt frå venstre mot høgre, og ikkje vertikalt nedover.

 

Korleis kan eg modifisera koden nedanfor for å få det til?

 

Takk for hjelpa !

 

Klikk for å se/fjerne innholdet nedenfor

/*menu */

#nav {

           margin-left: 295px;

           list-style: none;

           background: #900;

           padding: 0;

           border: 1px solid #fff;

           border-width: 0px 0px 0px 1px;

}



#nav ul {

           margin: 0;

           padding: 0;

           height: 1em;

           }

          

#toolbar form {

           margin: 0;

           padding: 0.1em 2em 0.1em 0em;

           height: 1em;

           }

          

#toolbar input {

           margin: 1px;

           }



#nav a {

           display: block;

           color: #fff;

           text-decoration: none;

           padding: 0.1em 2em;

}



#nav li {

           float: left;

           padding: 0;

           background: #900;

           border: 1px solid #fff;

           border-width: 1px 0;

}



#nav li ul {

           position: absolute;

           left: -999em;

           height: auto;

           width: 14.4em;

           w\idth: 12.9em;

           font-weight: normal;

           border: 1px solid #fff;

           margin: 0;

           list-style: none;

}



#nav li li {

           padding-right: 1em;

           width: 13.4em;

           border: 0px;

}



#nav li ul a {

           width: 12em;

           w\idth: 9em;

}



#nav li ul ul {

           margin: -1.75em 0 0 14em;

}



#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

           left: -999em;

}



#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

           left: auto;

}



#nav li:hover, #nav li.sfhover {

           background: #F20000;

}

/* end menu */

 

---skjul-tag lagt inn av JohndoeMAKT---

[ZeS]

*innlegg om nødvendigheten av skjul tagen fjernet*

 

sånn her du tenkte på? linky

 

om ja: her er css fila:

Klikk for å se/fjerne innholdet nedenfor

/*menu */

#nav {

          margin-left: 295px;

          list-style: none;

          background: #900;

          padding: 0;

          border: 1px solid #fff;

          border-width: 0px 0px 0px 1px;

}



#nav ul {

          margin: 0;

          padding: 0;

          height: 1em;

          }

        

#toolbar form {

          margin: 0;

          padding: 0.1em 2em 0.1em 0em;

          height: 1em;

          }

        

#toolbar input {

          margin: 1px;

          }



#nav a {

          display: block;

          color: #fff;

          text-decoration: none;

          padding: 0.1em 2em;

}



#nav li {

          float: left;

          padding: 0;

          background: #900;

          border: 1px solid #fff;

          border-width: 1px 0;

}



#nav li ul {

          position: absolute;

          left: -999em;

          height: auto;

          width: 14.4em;

          w\idth: 12.9em;

          font-weight: normal;

          border: 1px solid #fff;

          margin: -1.75em 0 0 8em;

          list-style: none;

}



#nav li li {

          padding-right: 1em;

          width: 13.4em;

          border: 0px;

}



#nav li ul a {

          width: 12em;

          w\idth: 9em;

}



#nav li ul ul {

          margin: -1.75em 0 0 14em;

}



#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

          left: -999em;

}



#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

          left: auto;

}



#nav li:hover, #nav li.sfhover {

          background: #F20000;

}

/* end menu */

 

om nei: vennligst forklar igjen

Endret 4. januar 2007 av ZeS

[Jonhoo]

Hadde jo vært greit å nå over til den neste menyen uten at den lukker seg da

[ZeS]

Hadde jo vært greit å nå over til den neste menyen uten at den lukker seg da

7644170[/snapback]

fungerer fint i FF2 her hvem browser bruker du?

[Jonhoo]

I FF 2.0.0.1:

 

Flytter man musen fra den venstre boksen mot den hoeyre saa lukker den hoeyre med en gang man treffer det hvite mellom dem

Endret 4. januar 2007 av Jonhoo

[ZeS]

hmm det var da pussig.. bruker FF 2.0.0.1 Jeg også, riktig nok linux versjonen, men burde jo bli det samme likevel...

her er sånn det vises for meg:

Endret 4. januar 2007 av ZeS

[Jonhoo]

hmm.. Rare saker.. Tydeligvis forskjeller paa Windows og Linux versjonene..

[Ståle]

Bruker Opera 9.10. Med litt tolmodighet virker det hos meg også, men det er en liten bug der. =/

[ZeS]

nå da? lagt til javascript "fiksen" til I.E.. ikke helt sikker på om jeg gjorde det riktig da men verdt et forsøk

[Ståle]

Ikke for meg ihvertfall. AKuratt det samme i IE 7, FF 2 og Opera.

Merkelig =/

[ZeS]

hmm må nok ha litt hjelp til å fikse den da noen som melder seg frivillig?

[Jonhoo]

Jeg fant ut at hvis jeg er kjapp nok saa faar jeg opp den neste menyen, og den ligger helt inntil..

[Gullars]

Det var ikkje heilt det eg meinte...

 

I ditt eksempel skulle "Remoras" dukka opp nedanfor, og eit eventuelt ekstra underpunkt til høgre for "Remoras".

 

Men eg har fått til ei alternativ løysing nå, som eg likte endå betre, så eg treng ikkje lenger hjelp.

 

Tusen takk for innsatsen

[ZeS]

okeys

 

noe sånn her du tenkte på?

Endret 4. januar 2007 av ZeS

[Ståle]

Det går vel an å fikse med nested lists?

à la http://alistapart.com/articles/horizdropdowns, non?

[Anders Moen]

Du finner noe ferdiglagd (med ut igjen fra en som kommer ut) lol, omtrent her eller her ettersom om du skal ha vertikal eller horisontal.