Logo der TYPO3 Usergruppe Leipzig

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;
}
 
Autor: