/************** nav allgemein **************/
.nav{
width: 546px;
height: 50px;
margin:350px auto;
}
.nav ul{
list-style: none;
}
.nav li>ul{
opacity: 0;
visibility: hidden;
position: absolute;
transition: opacity .6s;
box-shadow: 0 3px 3px rgba(0,0,0,.6);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.nav li a{
display: inline-block;
text-decoration: none;
font-family: 'Droid Sans', sans-serif;
font-size: 14px;
width: 120px;
padding: 8px 26px;
color: #fff;
transition: all .2s;
}
/***************** Level 1 *****************/
.dropdown-level-1{
border-radius: 6px;
width: 546px;
height: 50px;
box-shadow: 0 2px 3px rgba(0,0,0,.6);
}
.dropdown-level-1>li{
position: relative;
display: inline-block;
float: left;
overflow: visible;
}
.dropdown-level-1>li:first-of-type>a{
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.dropdown-level-1>li:last-of-type>a{
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.dropdown-level-1>li>a{
line-height: 50px;
padding: 0px 26px;
height: 50px;
width:auto;
}
/***************** Level 2 *****************/
.dropdown-level-2>li:last-of-type>a{
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.dropdown-level-2>li:first-of-type>a{
box-shadow: 0 6px 3px -4px rgba(0,0,0,.4) inset;
}
/***************** Level 3 *****************/
.dropdown-level-3{
position: absolute;
left: 172px;
margin-top: -32px;
z-index: -2;
border-top-right-radius: 6px;
}
.dropdown-level-3>li:last-of-type>a{
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.dropdown-level-3>li:first-of-type>a{
border-top-right-radius: 6px;
}
/****************** Hover ******************/
.nav li:hover>ul{
opacity: 1;
visibility: visible;
}
/***************** Farben ******************/
.blue .dropdown-level-1>li>a,.blue .dropdown-level-2>li>a:hover,.blue .dropdown-level-3>li>a:hover{
background: #2977d1;
}
.blue .dropdown-level-1>li>a:hover,.blue .dropdown-level-2>li>a,.blue .dropdown-level-3>li>a{
background: #5393dd;
}
/* ****** */
.red .dropdown-level-1>li>a,.red .dropdown-level-2>li>a:hover,.red .dropdown-level-3>li>a:hover{
background: #d1294b;
}
.red .dropdown-level-1>li>a:hover,.red .dropdown-level-2>li>a,.red .dropdown-level-3>li>a{
background: #dd536f;
}
/* ***** */
.orange .dropdown-level-1>li>a,.orange .dropdown-level-2>li>a:hover,.orange .dropdown-level-3>li>a:hover{
background: #e48416;
}
.orange .dropdown-level-1>li>a:hover,.orange .dropdown-level-2>li>a,.orange .dropdown-level-3>li>a{
background: #ec9a3c;
}
/* ***** */
.violet .dropdown-level-1>li>a,.violet .dropdown-level-2>li>a:hover,.violet .dropdown-level-3>li>a:hover{
background: #8f53dd;
}
.violet .dropdown-level-1>li>a:hover,.violet .dropdown-level-2>li>a,.violet .dropdown-level-3>li>a{
background: #7229d1;
}