Foros del Web - Ver Mensaje Individual

#3 (**permalink**) 09/02/2012, 05:01

Supongo que lo que quieres es esto:

Código HTML:

<html>
<head>
<style>
	#menu
	{
		background-color:red;
		display:block;
		list-style-type:none;
		margin:0;
		padding:0;
		width:100%;
		height:30px;
		position:relative;
	}
	
	#menu .option
	{
		display:block;
		margin:0;
		padding:0;
		width:200px;
		height:100%;
		float:left;
	}
	
	#menu .option .mainOption
	{
		background-color:cyan;
		display:block;
		height:100%;
		text-align: center;
		line-height:30px;
		text-decoration:none;
		color:black;
	}
	
	#menu .option .mainOption:hover
	{
		background-color:yellow;
	}
	
	#menu li ul
	{
		display:none;
	}

	#menu li ul li
	{
		display:block;
		margin:0;
		padding:0;
		width:200px;
		height:100%;
		float:left;
	}
	
	#menu li ul li a
	{
		background-color:orange;
		display:block;
		height:100%;
		text-align: center;
		line-height:30px;
		text-decoration:none;
		color:black;
	}	

	#menu li ul li a:hover
	{
		background-color:pink;
	}	
	
	#menu li:hover ul
	{
		background-color:green;
		display:block;
		list-style-type:none;
		margin:0;
		padding:0;
		width:100%;
		height:30px;
		position:absolute;
		left:0;
	}
</style>
<body>
	<ul id="menu">
		<li class="option">
			<a href="" class="mainOption">INICIO</a>
			<ul>
				<li><a href="">SUBOPCIÓN INICIO 1</a></li>
				<li><a href="">SUBOPCIÓN INICIO 2</a></li>
				<li><a href="">SUBOPCIÓN INICIO 3</a></li>
			</ul>
		</li>
		<li class="option">
			<a href="" class="mainOption">TEST</a>
			<ul>
				<li><a href="">SUBOPCIÓN TEST 1</a></li>
				<li><a href="">SUBOPCIÓN TEST 2</a></li>
				<li><a href="">SUBOPCIÓN TEST 3</a></li>
			</ul>
		</li>
	</ul> 
</body>
</html>