CSS - drop down til drop "up" menu

Får lige hele koden

/*Drop-down menu*/
.nav2 {float:left; width:900px; border:none; background:rgb(220,220,220) url(../img/bg_head_bottom_nav.jpg) no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:left; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

Hvordan ser JavaScript-delen ud?

=)

HTML-delen så?

temp.MenuOben = HMENU
temp.MenuOben {
    wrap = |
    entryLevel = 0
    excludeUidList = 5,6,7
1 = TMENU
1 {
  wrap = <ul> | </ul>
  expAll = 1
  NO.ATagTitle.field = subtitle//title
  NO.wrapItemAndSub = <li> | </li>

IFSUB = 1
IFSUB {
    ATagTitle.field = subtitle//title
    wrapItemAndSub = <li> | </li>
    allWrap = | <!--<![endif]-->
    linkWrap = |<!--[if IE 7]><!-->
    ATagBeforeWrap = 1
    }
}

2 = TMENU
2 {
wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->
expAll = 1

NO.ATagTitle.field = subtitle//title
NO.wrapItemAndSub = <li> | </li>

IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
allWrap = | <!--<![endif]-->
linkWrap = |<!--[if IE 7]><!-->
ATagBeforeWrap = 1
ATagParams = class="hide"
}

}
3 < .2
4 < .2

Ja ok - sov lige i timen. Den nuværende menu er kun basseret på css og intet html, så det er kun følgende kode der skal ændres så det bliver en "drop-up" menu i stedet for drop down

/*Drop-down menu*/
.nav2 {float:left; width:900px; border:none; background:rgb(220,220,220) url(../img/bg_head_bottom_nav.jpg) no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:left; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

<ole>

"Den nuværende menu er kun basseret på css og intet html" >> Det lyder som en sminkepung uden kvinde ... og hvad skal man bruge det til?
CSS uden HTML kan ikke bruges til noget somhelst. CSS kan kun bruges til at style HTML-elementer med. Uden HTML giver CSS ingen mening  :)

/mvh
</bole>

Ja - nu er det her så et lidt sær tilfælde, da css´en er baseret på typoscript- og der er der kun css´en der bestemmer

Så sære tilfælde eksisterer ikke på WWW. CSS kan som sagt ikke bruges til noget somhelst uden markup af én eller anden slags. Derfor _må_ der nødvendigvis findes markup-kode i dokumentet - statisk eller dynamisk. Ellers kan du ligeså godt slette CSS'en - for så har du intet at bruge den til  :)

- og så er der nu flere ting, der undrer mig ved koden. Her vil alle browsere få sat z-index til 1000 - også ikke-IE6'ere:

.nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}

Hvad gør de to backslashes her (i top og margin):

.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}

Denne linje tyder på, der er noget kode, der skal wrappes i en tabel - som i IE mindre end version 6.0 bliver lagt i et a-element. Det er da vist ikke valid markup.

Anyway, så må der blive genereret noget HTML. Uden den kode er det svært at vide, hvad der sker. Prøv at lægge et link til siden

ups ... tabel-wrapperen er her:
    wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->

ups igen! Jeg overså '!important' ved z-index'et. Ikke IE6'ere vil ganske rigtig få sat z-index til 'auto'  :)