#nav{   
list-style:none;    
font-weight:bold;
border-top:4px solid #d6ccc2; 
margin-top:-13px;  
margin-bottom:10px;   
/* Clear floats */    
float:left;    
width:100%;    
/* Bring the nav above everything else--uncomment if needed.    
position:relative;   
z-index:5;    
*/
}

#nav li{    
float:left;
    
margin-right:10px;    
position:relative;
}

#nav a{    
display:block;    
padding:5px;    
color:#00001a; /* color: #fff; */   
background: #d6ccc2; /* background:#858983; */ 
text-decoration:none;
-webkit-transition: -webkit-transform .2s;
	transition: transform .2s, 
	back-ground-color 1s ease-in 1s;
}

#nav a:hover{     
color:#fff;    
background:#6b0c36;    
text-decoration:underline;
background-color: blue;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
 
/* nav a:hover { */

/*--- DROPDOWN ---*/
#nav ul{    
background:#fff;  /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */     
background:rgba(255,255,255,0);  /* But! Let's make the background fully transparent where we can, we don't want to see it if we can help it... */    
list-style:none;    
position:absolute; 
   
left:-9999px;  /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{    
padding-top:1px;  /* Introducing a padding between the li and the a give the illusion spaced items */    
float:none;
}  
#nav ul a {    
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul {  /* Display the dropdown on hover */     
left:0;  /* Bring back on-screen when needed */
}
#nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */    
background:#3d3329; /* background: #d03278; */   
text-decoration: none; /* text-decoration: underline;*/
}
#nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */    
text-decoration:none;
}
#nav li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */     
background:#3d1dc9;
}