Beispiel für die dazugehörige css-Datei
.BX_cssmenue {
width:600px;
height:25px;
border:1px solid #98b1c4;
background:#bdcedc;
z-index:100;
position:relative;
}
.BX_cssmenue ul {
float:left;
list-style-type:none;
position:relative;
margin:0;
padding:0;
}
.BX_cssmenue li {
float:left;
}
.BX_cssmenue li:hover,.BX_cssmenue li a:hover {
position:relative;
}
.BX_cssmenue a {
display:block;
float:left;
height:25px;
white-space:nowrap;
padding:0 10px 0 10px;
line-height:25px;
font-size:12px;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
text-align:center;
color:#293d6b;
text-decoration:none;
}
.BX_cssmenue li:hover a,.BX_cssmenue a:hover {
background:#98b1c4;
}
.BX_cssmenue a.submenue {
background:url(/static/dev/css-menu/top-sub.gif) no-repeat center right;
padding:0 20px 0 10px;
}
.BX_cssmenue li:hover a.submenue,.BX_cssmenue a.submenue:hover {
background:#98b1c4 url(/static/dev/css-menu/top-sub.gif) no-repeat center right;
}
.BX_cssmenue ul ul {
position:absolute;left:-5000px;
top:-5000px;
width:202px;
height:auto;
border:none;
background:#bdcedc;
}
.BX_cssmenue table {
margin-top:-1px;
border-collapse:collapse;
}
.BX_cssmenue ul :hover ul {
left:0px;
top:25px;
}
.BX_cssmenue li li {
width:200px;
border:1px solid #98b1c4;
border-width:0 1px;
padding:0
}
.BX_cssmenue li li.firstitem {
border-top:1px solid #98b1c4;
}
.BX_cssmenue li li.lastitem {
border-bottom:1px solid #98b1c4;
}
.BX_cssmenue ul ul a,.BX_cssmenue ul :hover ul a,.BX_cssmenue ul :hover ul :hover ul a {
float:none;
margin:0;
width:180px;
height:auto;
white-space:normal;
padding:4px 10px 5px 10px;
font:bold 12px Arial,Helvetica,sans-serif;
text-decoration:none;
text-align:left;
color:#293d6b;
background:none;
}
.BX_cssmenue ul ul :hover a,.BX_cssmenue ul ul a:hover,.BX_cssmenue ul ul :hover ul :hover a,.BX_cssmenue ul ul :hover ul a:hover {
background:#98b1c4;
}
.BX_cssmenue ul ul a.submenue,.BX_cssmenue ul :hover ul a.submenue {
width:180px;
padding:4px 10px 5px 10px;
background:url(/static/dev/css-menu/sub-sub.gif) no-repeat center right;
}
.BX_cssmenue ul ul :hover a.submenue,.BX_cssmenue ul ul a.submenue:hover {
background:#98b1c4 url(/static/dev/css-menu/sub-sub.gif) no-repeat center right;
}
.BX_cssmenue ul :hover ul ul {
position:absolute;
left:-5000px;
top:-5000px;
}
.BX_cssmenue ul :hover ul :hover ul {
left:190px;
top:-1px;
}
.BX_cssmenue br {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Link zur Demo-Seite mit diesem Code http://dev.batix.local/www/dev/purecssmenu/