TerryMooreII/menu.html

## menu.html
<!--
Pure CSS Menu example
-->

<html>
<head>
<title>Pure CSS Menu</title>

	<style>
	/*
	*/
	*{
		font-family:arial;
		color:#FFFFFF;
	}

	#menu{
		position:relative;
		float:left;
		width:100%;
		font-size:13px;
		font-weight:bold;

	}

	#menu li a{
		padding:8px 7px 8px 7px;
		color:#333;
		display:block;
		text-decoration:none;
		border:1px solid #ccc;
		border-radius:3px;

	}
	#menu li:hover a{
		color:white;
		background-color:#252525;
		border:1px solid #252525;

	}

	#menu li{
		list-style-type: none;
		margin: 0px 5px 0px 5px;
		float:left;
		color:#252525;
		position:relative;
	}

	#menu ul{
		position:absolute;
		list-style-type: none;
		left:-9999px;
		color:white;
		background-color:#252525;
		width:170px;
		border-radius:3px;
		border-top-left-radius:0px;
		z-index:2;

	}

	#menu li:hover ul a{
		border-bottom-right-radius:3px;
		border-bottom-left-radius:3px;
	}

	#menu li:hover ul{
		top:31px; /**/
		left:0px;
		display:block;
		padding:0px;
		margin:0px;
	}

	#menu ul li {
		float:none;
		display: block;
		padding:0px;
		margin:0px;
	}

	#menu ul li a{
		position:relative;
		color:white;
		font-weight:normal;
		padding: 3px 3px 3px 9px;
		border:1px solid #252525;

	}
	#menu ul li:first-child{
		padding-top: 3px
	}

	#menu ul li:last-child{
		padding-bottom: 3px
	}


	#menu ul li a:hover{
		color:lightblue	;
		border-bottom-right-radius:3px;
		border-bottom-left-radius:3px;
	}


	</style>

</head>
<body>

	<ul id="menu">
		<li>
			<a href="#">Menu 1</a>
			<ul>
				<li><a href="#">Sub Item</a></li>
			</ul>
		</li>

		<li>
			<a href="#">Menu 2</a>
			<ul>
				<li><a href="#">Sub Item</a></li>
				<li><a href="#">Sub Item</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Menu 3</a>
			<ul>
				<li><a href="#">Sub Item</a></li>
				<li><a href="#">Sub Item</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Menu 4</a>
		</li>
	</ul>

</body>
</html>