Hier ein Snippet für die Erstellung eines Drop Down Listenmenüs ohne Java Script.
Eine Live Demo befindet sich unter www.steudte-kaffee.de
temp.menu.main = HMENU
temp.menu.main {
entryLevel = 0
excludeUidList = 35
wrap = |
# Hauptmenue
1 = TMENU
1 {
wrap = <ul> | </ul>
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
}
}
2 = TMENU
2 {
wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></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=drop
}
}
3 < .2
4 < .2
}
#einbinden in maintemplate
lib.menuMain < temp.menu.main
.menu {
width : 750px;
float : left;
margin : 0;
padding : 0;
text-align : right;
border-bottom : 5px solid #fff;
background : #D0A707;
z-index : 100;
color:#000;
}
.menu ul {
padding : 0;
margin : 0;
list-style-type : none;
}
.menu ul ul {
width : 150px;
}
.menu li {
float : left;
width : 150px;
position : relative;
}
.menu a {
display : block;
font-size : 0.9em;
text-decoration : none;
color : #000;
width : 139px;
height : 30px;
border : solid #fff;
border-width : 0 1px 1px 0;
background : #D0A707;
padding-right : 10px;
line-height : 29px;
font-weight : bold;
}
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background : #D0A707;
}
.menu ul ul a.drop:hover {
background : #D0A707;
}
.menu ul ul :hover > a.drop {
background : #D0A707;
}
.menu ul ul ul a, .menu ul ul ul a:visited {
background : #D0A707;
}
.menu ul ul ul a:hover {
background : #D0A707;
}
.menu ul ul {
visibility : hidden;
position : absolute;
height : 0;
top : 31px;
left : 0;
width : 150px;
}
* html .menu ul ul {
top : 30px;
}
.menu ul ul ul {
left : 150px;
top : 0;
width : 150px;
}
.menu table {
position : absolute;
top : 0;
left : 0;
}
.menu ul ul a {
background : #D0A707;
color : #000;
height : auto;
padding : 0 10px 0 10px;
width : 129px;
}
* html .menu ul ul a {
width : 150px;
width : 129px;
}
.menu a:hover {
color : #fff;
background : #999;
}
.menu :hover > a {
color : #fff;
background : #999;
}
.menu ul li:hover ul, .menu ul a:hover ul {
visibility : visible;
}
.menu ul :hover ul ul {
visibility : hidden;
}
.menu ul :hover ul :hover ul {
visibility : visible;
}