.menu{
	width:100%;
	margin: 0;
	padding: 0;
	display:block;
	background: Gainsboro;
}
 
.menu li{
	display: inline-block;
	position: relative;
	z-index:100;	
}
 
.menu li a {
font-size:12px;
text-decoration:none;
padding:7px;
display:block;
color:black;
 
-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}
 
.menu li a:hover, .menu li:hover > a{
	cursor:pointer;
	color:black;
	background:silver;
}

/* hide the second level menu */
.menu ul {
display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 29px;
left: 0px;
background: Gainsboro;
}
 
/* display second level menu on hover */
.menu li:hover > ul{ display: block;}
 
.menu ul li {
display:block;
float: none;
background:black;
margin:0;
padding:0;
}
 
.menu ul li a {
font-size:12px;
font-weight:normal;
display:block;
color:black;
border-left:0px solid #ffffff;
background:Gainsboro;
text-align:left;
/*width:auto;
white-space: nowrap;*/
}
 
.menu ul li a:hover, .menu ul li:hover > a{
cursor:pointer;
background:silver;
border-left:0px solid #9CA3DA;
color:black;
}

/* change level 3 menu positions */
.menu ul ul {left: 249px;
	top: 0px;
	/*width:300px;*/
}
}