Hallo, kleines Problem...
Ich habe ein horiznatales Drop-Down-Menü gebaut und jetzt scheiterts wohl noch am TS.
So soll es aussehen
Menüpunkt1 | Menüpunk2 | ...
unterpunkt1 ...
unterpunkt1.1 ...
unterpunkt1.2 ...
unterpunkt1.3 ...
unterpunkt2 ...
...
Kann mir jemand sagen, wie ich die zweite Ebene, also unterpunkt1.3 etc., unter z.B. Unterpunkt1 bekomme?
Das ist mein TS:
page.headerData.100 = TEXT
page.headerData.100.value = script type="text/javascript" src="fileadmin/templates/main_menu.js"></script
page.headerData.100.wrap = <|>
page.includeCSS.file1000 = fileadmin/templates/main_menu.css
temp.main_menu = HMENU
temp.main_menu.entryLevel = 0
temp.main_menu.1 = TMENU
temp.main_menu.1 {
expAll = 1
wrap = <ul id="nav"> | </ul>
NO = 1
NO.allWrap = <li>|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li>|</li>
ACTIFSUB < .IFSUB
}
temp.main_menu.2 < temp.main_menu.1
temp.main_menu.2 {
wrapItemAndSub = <li>|</li>
}
lib.mainMenu < temp.main_menu
CSS sieht so aus:
/* 1. Level */
#nav, #nav UL {
padding: 0;
margin: 0;
list-style: none;
z-index:1;
}
#nav LI {
float: left;
padding:2px 15px 3px 15px;
border-top: 3px solid #E5E6E0;
border-bottom: 2px solid #E5E6E0;
background: url('item-seperator-menu.gif') no-repeat 0px 4px;
}
#nav LI.first {
background-image: none;
}
#nav LI.last { }
#nav LI A {
display: block;
color: #7B7C78;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
}
#nav LI:hover , #nav LI.sfhover {
border-top-color: #E5E6E0;
border-bottom-color: #E5E6E0;
}
#nav LI.act {
border-top-color: #E5E6E0;
border-bottom-color: #E5E6E0;
}
#nav LI.act A {
color: #3E3F3B;
}
/* 2. Level */
#nav LI UL {
position: absolute;
width: 20em;
left: -999em;
margin: 5px 0 0 -21px;
}
#nav li ul li.header a{
font-weight: bold;
}
HTML>BODY #nav LI UL {
margin-left: -15px;
}
/* verschiebe Liste im IE nach links */
* HTML #nav LI UL {
margin-left: -15px;
}
#nav LI UL LI {
width: 15em;
background: #E5E6E0;
border-width: 0 1px 0px 1px;
padding: 0 14px 0 14px;
}
#nav LI:hover UL LI A, #nav LI.sfhover UL LI A {
text-transform: none;
letter-spacing: normal;
font-weight: normal;
font-size: 11px;
width: 99%;
padding: 2px;
border-right:none;
}
#nav LI UL LI:hover, #nav LI UL LI.sfhover {
background: #7B7C78 url('') no-repeat 6px 9px;
}
#nav LI UL LI:hover a, #nav LI UL LI.sfhover a {
color:#FFF;
}
#nav LI UL LI.act2 {
background: #7B7C78 url('') no-repeat 6px 9px;
}
#nav LI UL LI.act2 A {
color:#FFF;
}
#nav LI:hover UL, #nav LI.sfhover UL {
left: auto;
}
#nav A {
text-decoration: none;
}
#nav A:hover {
text-decoration: none;
color:#3E3F3B;
}