Código HTML :
<style type="text/css">
#barraMenu {position:fixed; top:46px; left:170px; width:703px; height:29px; background-color:#000000; border-radius:5px;}
ul {position:fixed;}
#li {font-family:Arial, Helvetica, sans-serif; font-size:18px; list-style:none;display:inline-block;}
#li a {text-decoration:none; color:#F90; padding:4px; border-radius:5px; background-color:#000000;}
#li a:hover {background-color:#06C; border-radius:5px; color:#000000;}
.menu1 {position:absolute; top:25px; left:175px; width:125px;}
.menu2 {position:absolute; top:25px; left:375px; width:93px;}
.menu3 {position:absolute; top:25px; left:575px; width:119px;}
.menu4 {position:absolute; top:25px; left:775px; width:83px;}
#subLi {list-style:none;}
#subLi .menu1:hover {position:absolute; top:100px; list-style:circle; color:#99CC00; }
</style>
</head>
<body>
<div id="barraMenu"></div>
<nav>
<ul>
<li class="menu1" id="li"><a href="#">Portfolio acido</a></li>
<li class="subMenu1" id="subLi"><a href="#">D. Grafico</a></li>
<li class="subMenu2" id="subLi"><a href="#">D. Web</a></li>
<li class="subMenu3" id="subLi"><a href="#">D. Multimedia</a></li>
<li class="menu2" id="li"><a href="#">Quien soy</a></li>
<li class="menu3" id="li"><a href="#">Como trabajo</a></li>
<li class="menu4" id="li"><a href="#">Contacto</a></li>
</ul>
</nav>
</body> 
