@charset "utf-8";
* { margin:0; padding: 0 }

.menu {
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
position:relative;
z-index:800;
height: 200px;
width: 194px;
margin-top: 16px;
margin-left: 17px;
float: left;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position: relative;
z-index: 100;
padding: 0;
margin: 0;
list-style-type: none;
width: 178px;
}
.menu li {
/* Abstand zwischen Menüpunkten */
height: 22px;
/* for IE7 */
float: left;
padding-top: 2px;
width: 170px;
margin-left: 0px;
margin-bottom: 0px;
}

* html .menu li {margin-left:-16px; margin-lef\t:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}

/* style the links */
.menu a, .menu a:visited {
display: block; 
text-decoration: none;
height: 20px;
line-height: 16px;
width: 165px;
color: #4F7634;
padding-left: 10px;
padding-top: 2px;
}
/* style the link hover */
*html .menu a:hover {
color: #FFFFCC;
background-color: #B8CE93;
text-decoration: none;
height: 20px;
line-height: 16px;
}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {
color: #FFFFCC;
text-decoration: none;
}
*html .menu ul ul a:hover {
color: #FFFFCC;
background-color: #B8CE93;
text-decoration: none;
height: 20px;
line-height: 16px;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:-2px;
left:110px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
left: 110px;
background-color: #B8CE93;
border: 1px solid #4F7634;
width: 230px;
font-size: 12px;
line-height: 16px;
/* set up the overrun area: */
padding:4px;
}

.menu ul.top2 {top:30px;}
.menu ul.top3 {top:51px;}
.menu ul.top4 {top:77px;}
.menu ul.top5 {top:103px;}
.menu ul.top6 {top:120px;}
.menu ul.top7 {top:155px;}