@charset "UTF-8";
/* CSS Document Name: CSS3 Dropdown Menu
Created in May, 2013
Description: Basic CSS3 Dropdown Menu with simple animation
Version 1.2
Author: Lorna Kropp */
<style>
body {
}

/* reset */
.menu,
,menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;

}

/* Positioning */
ul.menu {
	margin:150px auto 0 auto}

/* menu */
.menu {
	height:40px;
	width:500px;/*comeback and change to fit pages */
	background:#CCC
	border-radius: 5px
	webkit-border-radius: 5px
	moz-border-radius: 5px
	
	background: linear-gradient(top, #333 0%, #CCC 100%);
	background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
	background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);


}

.menu li {
	list-style:none;
	float: left;
	display: block;
	height: 40px;
	position: relative;
}

/*links */
.menu li a {
	display:block;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#003;
	font-size:15px;
	padding: 0 15px;
	margin: 5px 0;
	line-height: 30px;
	border-left: 1px solid #F00;
	border-right: 1px solid #F00;
	
	transition: color .3s ease;
	-moz-transition: color .3s ease;
	-webkit-transition: color .3s ease;
	-ms-transition: color .3s ease;

}
.menu li:first-child a {border-left:none;}
.menu li:last-child a {border-right:none;}
.menu lihover > a {color: #b94861;}

/*submenu*/

.menu ul {
	position:absolute;
	opacity: 0;
	background: #574a62;
	border-radius: 5px
	webkit-border-radius: 5px
	moz-border-radius: 5px
	
}
	
.menu li:hover > ul {
	opacity: 1;
}

.menu ul li {
	
	height: 0;
	overflow: hidden;
	padding: 0;
	
	}

.menu li:hover > ul li {
	height: auto;
	overflow:visible;
	
	}
.menu ul li a {
	width: 100px;
	margin: 0;
	padding: 5px 10px;
	border: none;
	border-bottom: 1px solid #353539;
	
	}

.menu ul li:last-child a { border: none; }

	
</style>