@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Merriweather+Sans:800);

#nav ul{
margin: 0 auto;
font: bold 16px Lato;
font-weight: bold; 
padding: 0;
list-style-type:none;
list-style-position:outside;
position:relative;
width: 200px;
text-decoration:none;
}

#nav a{
display:block;
color:#FFF;
text-decoration:none;
padding: 22px 20px;
-o-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-khtml-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
text-decoration:none;
}

#nav a:hover{
color:#009fc3;
background: rgba(99,100,102, 0.6);
}

#nav li{
float:left;
position:relative;
}

#nav ul {
float:left;
position:absolute;
display:none;
width:230px;
top: 38px;
}

#nav li ul a{
float:left;
background: #000000;
padding: 10px;
color: #FFFFFF;
height:auto;
width:210px;
border-bottom: 1px dotted #FFFFFF;
font-size: 12px;
}

#nav li ul a:hover{
float:left;
background: #3D3D3D;
padding: 10px;
color: #00aeef;
height:auto;
width:210px;
font-size: 12px;
}

#nav ul ul{
top:auto;
border-left: 1px dashed #5e2f13;
}	

#nav li ul ul {
left: 196px;
margin:0px 0 0 34px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}