Cita:
Iniciado por brai_lf 
Lo que no se como hacer es lo de que en el hover, ocupe todo el width el rectangulo que se abre
Bueno, espero que el siguiente ejemplo te ayude a construir tu menú. Y por favor revisa el link de CSS que te adjunté en el mensaje anterior.
Código CSS:
Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gebremswar</title>
<style>
*{margin:0;padding:0;outline:0}
#wrapper{background:#CECECE; height:400px; margin:0 auto; overflow:hidden; width:700px}
#menu li{float:left; list-style:none; padding:5px 10px}
#menu li > ul {opacity:0; float:none; visibility:hidden}/*oculta los ul como el de la linea 23*/
#menu li:hover{background:#E9E980}
#menu li:hover > ul{opacity:1; visibility:visible}/*¡Atento aquí!*/
#sub-nav{background:#E9E980; left:165px; padding:25px; position:absolute; width:643px}
#sub-nav li{float:none}
.sn-column{margin:0 200px 0 0; float:left}
</style>
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li id="home">HOME</li>
<li id="options">OPTIONS
<ul> <!-- éste es el elemento oculto -->
<li>
<div id="sub-nav">
<ul class="sn-column">
<li>option A1</li>
<li>option A2</li>
<li>option A3</li>
</ul>
<ul class="sn-column">
<li>option B1</li>
<li>option B2</li>
<li>option B3</li>
</ul>
</div>
</li>
</ul>
</li>
<li id="about">ABOUT</li>
</ul>
</div>
</body>
</html>