#menu, #menu ul {
width: 100%;
margin: 0;
padding: 0; 
background-color: #000;
float: left;
list-style-type: none;
list-style: none;
}

#menu ul li {
text-align: left;
margin: 0;
padding: 0;
float: left;
}

#menu li {
padding: 25px 0px 5px 0px; 
float: left;
border-right: 3px solid #fff;
width: 126px;  /* IE 5 rechnet die border mit zur width */
voice-family: "\"}\"";
voice-family: inherit;
width: 123px;
}

#menu li#navi-rechts {
border-right: 0px;
width: 123px;
}

#menu li:hover, #menu li.iehover, #menu li:focus, #menu li:active {
background-color: #f00;
}

#menu a {
color: #fff;
margin: 0;
padding: 0 0 0 5px;
display: block;
text-decoration: none;
font-size: 0.75em;
}

#menu a:hover, #menu a:focus, #menu a:active {
text-decoration: underline;
background-color: #f00;
}

#menu li ul {
margin: 0;
padding: 0;
margin-top: 5px;
position: absolute;
left: -999em;
top: -999em; /* im Gegensatz zu display:none auch zugaenglich fuer Screenreader. Nachteil: beim Tabben werden die li-items zwar ausgewaehlt, aber nicht angezeigt */
height: auto;
width: 11em;
background-color: #ff0;
background: url(../img/bg_li-trenner.gif) top left no-repeat;
}

* html #menu li ul {
width: 10em;
}

#menu li li { 
background-color: #f00;
padding: 5px 5px 5px 1px;
display: block;
float: none;
border: 0px;
width: 150px;
margin-left: -16px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 0px;
}

#menu li li.li-top {
background: url(../img/bg_li-trenner.gif) top left no-repeat;
}

#menu li ul a {
float: left;
voice-family: "\"}\"";
voice-family: inherit;
float: none;
}

#menu li ul li a:hover, #menu li ul li a:focus, #menu li ul li a:active {
color: #fff;
text-decoration: underline;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.iehover ul, #menu li:focus ul, #menu li li:focus ul, #menu li:active ul, #menu li li:active ul {
display: block;
left: auto;
top: auto;
}