#navi li {
    display: inline-block;
    vertical-align: top;
    padding: 4px 10px;
    border-right: 1px solid #FFF;
}

#navi .active {
    color: #000 !important;
    font-weight: 700;
    margin: 0px 15px;
    padding: 0px 7px 0px 3px !important;
}
#navi .active-root-item {
background: url("../pix/navi_bg.gif") repeat-x scroll 0% 0% #FFF;
}

#navi ul {
    position:relative;
}
#navi ul li {
    float: left;
    display: inline-block;
    padding: 0 10px;
    margin: 0;
}
#navi ul ul li {
width:100%;
border-bottom:1px solid #c0c0c0;
}

#navi ul ul li:hover {

background-color:#e9e9e9;
}

#navi ul ul li a {
	color:#000;
	font-family: Arial,Verdana,Helvetica,Geneva,SunSans-Regular;
	font-size: 12px;
	font-weight: normal;
	font-variant:normal !important;
	width: auto;
	display:block;
	margin:0;
	float:left;
}

/* 2. Ebene ausgeblendet*/
#navi ul ul{
    position:absolute;
    top:22px;
	min-width:30%;
    height:auto;
    Z-index:10;
    background-color:#fff;
	display:none;
	margin: 0 0 0 -10px;
	overflow:hidden;
}


/* 2. Ebene bei hover einblenden */
#navi ul li:hover ul {
    display:block;
    z-index:99;
    background-color:#DEDEDE;
	color: #000;
	width: 320px;
}

@media only screen and (max-width : 680px) {
	#navi ul ul{
		position:relative;
		width:100%;
		top:0px;
		height:auto;
		background-color:#fff;
		display:block;
		margin: 0 0 0 -10px;
		overflow:hidden;
	}
	#navi ul li:hover ul {
		position:relative;
		width:100%;
		height:auto;
		background-color:#fff;
		display:block;
		margin: 0 0 0 -10px;
		overflow:hidden;
	}
	#navi ul li ul li {
		background:#000;
		display:none !important;
	}

	#navi ul li.active-root-item ul li {
		background:#fff;
		display:block !important;
	}

	li.nav-item ul li a {
	padding-left: 20px !important;
}
}