#menu {
float: left;
clear: both;
width: 730px;
height: 100px;
background-color: #ffffff;
border: 10px solid #ffffff;
margin-top: 15px;
background-image: url(../images/main/bg_navi.jpg);
}

#menu ul {
list-style: none;
margin: 5px 0 0 5px;
padding: 0;
float: left;
}
/** have to give width, otherwise IE 6 does'nt float left **/
#boehm{width: 75px;}
#collection{width: 70px;}
#gala_frisuren{width: 88px;}
#events{width: 45px;}
#aktuelles{width: 65px;}
#impressum{width: 70px;}
#links{width: 40px;}
#kontakt{width: 55px;}

#menu ul li a, #menu h2 {
font: bold 10px/12px arial, helvetica, sans-serif;
display: block;
margin: 0;
}

/* need to be padding, IE 7 shows wrong position of submenu */
#menu h2 {
color: #FFF0F5;
padding: 0px 0px 2px 3px;
text-transform: uppercase;
}

#menu a {
color: #FFF0F5;
padding: 0 3px 0 3px;
font-weight: normal;
text-decoration: none;
}

#menu li a:hover {
color: #990100;
background-color: #FFF0F5;
}

#menu li {position: relative; clear: both;}

#menu ul ul {
position: absolute;
margin: 0;
padding: 0;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
div#menu ul#ul_archiv{width: 200px; float: left;}
div#menu ul#ul_archiv li{float: left; clear: none; width: 30px;} /* Breite für IE 7 */