/ März 25, 2010/ Blog

Reines CSS Menü z.B. für Joomla
funktioniert im FF. Im IE nur bis zum ersten Sublevel, danach wird kein weiteres Sublevel mehr angezeigt.

/* CSS-Design by Tian Froehlih
Standard Joomla-Menue
************************************************************** */
#current {}
a.mainlevel:link, a.mainlevel:active, a.mainlevel:visited {}
a.mainlevel:hover {}
a.sublevel:link, a.sublevel:active, a.sublevel:visited {}
a.sublevel:hover {}

/*  DROPDOWN MENUE – ursprung aus Suckerfish – angepasst um leichter formatieren zu können.
************************************************************** */
#hauptmenue, #hauptmenue ul {
padding: 0;
margin: 0;
list-style: none;
}
#hauptmenue a {
display: block;
width: 134px;
color:#6f5f51;
}
#hauptmenue li {
position:relative;
width:134px;
display:block;
}
#hauptmenue li a:link, #hauptmenue li a:visited {
background-image: url(../images/menuebg.jpg);
background-repeat:no-repeat;
background-position:0 0;
width:134px;
font-size:10px;
padding:10px 0 10px 12px;
text-decoration: none;
height:13px;
}
#hauptmenue li a:hover, hauptmenue li a:active {
background-position:-146px 0;
font-size:10px;
padding:10px 0 10px 12px;
text-decoration: none;
height:13px;
width:134px;
}
#hauptmenue li ul {
position: absolute;
width: 134px;
left: -999em;
margin-left:146px;
margin-top:-31px;
}
#hauptmenue ul li a:link, #hauptmenue ul li a:active, #hauptmenue ul li a:visited, #hauptmenue ul li a:hover {
background-image: url(../images/business_menu_sub.jpg);
background-repeat: no-repeat;
}
#hauptmenue li:hover ul {
left: auto;
background-position:-134px 0;
}
#hauptmenue li:hover ul, #hauptmenue li.sfhover ul {
left: auto;
}
#hauptmenue li ul ul {
margin: -31px 0 0 146px;
}
#hauptmenue, #hauptmenue ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 13px;
}
#hauptmenue li:hover ul ul, #hauptmenue li.sfhover ul ul {
left: -999em;
}
#hauptmenue li:hover ul, #hauptmenue li li:hover ul, #hauptmenue li.sfhover ul, #hauptmenue li li.sfhover ul {
left: auto;
}
#hauptmenue li:hover ul ul, #hauptmenue li:hover ul ul ul, #hauptmenue li.sfhover ul ul, #hauptmenue li.sfhover ul ul ul {
left: -999em;
}
#hauptmenue
li:hover ul, #hauptmenue li li:hover ul, #hauptmenue li li li:hover ul,
#hauptmenue li.sfhover ul, #hauptmenue li li.sfhover ul, #hauptmenue li
li li.sfhover ul {
left: auto;
}
#hauptmenue li:hover ul
ul, #hauptmenue li:hover ul ul ul, #hauptmenue li:hover ul ul ul ul,
#hauptmenue li.sfhover ul ul, #hauptmenue li.sfhover ul ul ul,
#hauptmenue li.sfhover ul ul ul ul {
left: -999em;
}
#hauptmenue
li:hover ul, #hauptmenue li li:hover ul, #hauptmenue li li li:hover ul,
#hauptmenue li li li li:hover ul, #hauptmenue li.sfhover ul,
#hauptmenue li li.sfhover ul, #hauptmenue li li li.sfhover ul,
#hauptmenue li li li li.sfhover ul {
left: auto;
}
/*#current{} ist im Joomla menue oben*/
#current ul li{
font-weight: normal;
}
#current a:link, #current a:visited, #current a:hover, #current a:active {
background-position:-146px 0 !important;
}
#current ul li a:link, #current ul li a:visited, #current ul li a:active {
background-position:0 0 !important;
}
#current ul li a:hover {
background-position:-146px 0 !important;
}

Getestet in: FF 1, FF 2, FF 3, Safari, CSS 2.1, IE 7