Menu simples com submenus usando css

subzero59 · 27 de novembro de 2016

Saudações galera!

to quebrando a cabeça pra fazer um menu simples que quando passe o mouse ele abra as opções, o que posso mudar nesse codigo pra que fique legal (mandei um print em anexo pra vocês verem como ta ficando)

Segue o codigo:

<html>
	<head>
		<title>Menu</title>
		<style>
			#menu{
				list-style:none;
				position:absolute;
				left:15%;
			}
			
			#menu li{
				display:inline;
				border:1px solid black;
				float:left;
				padding:10px;				
				text-align:center;
				background-color:#CCCCCC;
			}
			
			#menu li:hover{
				background-color:#EDEDED;
			}
			
			#menu li a{
				text-decoration:none;
				display:block;
				font-weight:bold;
				font-family:verdana;
			}
			
			#menu li ul{
				display:none;
			}
			
			#menu li:hover ul{
				display:block;
			}
			
		</style>
		
	</head>
	<body>		
		<ul id="menu">
			<li id="menu1"><a href="">Menu1</a>
				<ul>
					<li><a href="">opcao1</a></li>
					<li><a href="">opcao2</a></li>
					<li><a href="" >opcao3</a></li>         
				</ul>			
			</li>			
			
			<li><a href="">Menu2</a></li>
			<li><a href="" >Menu3</a></li>
			
		</ul>	
		
	</body>

</html>