Quedaria asi, ya desde aqui tu tendras que modificar algunas cosas para que el diseño quede mejor :encouragement:
PERDO LA DEMORA
🙄🙄
DEMO:
CodePen - Pen
Insertar CODE, HTML o PHP:
<style>
.navbar{display:none;}
body{
background: url(http://1.bp.blogspot.com/-UGxay_3orfc/UgXfe6oaP2I/AAAAAAAAACg/H5E97-0SHAo/s1600/bg.png);
color: #666;
font-family: 'Lora', serif;
font-size: 14px;
font-weight: normal;
line-height: 22px;
margin: 0;
padding: 0;
text-decoration: none;
}
#nav {
background: url(http://1.bp.blogspot.com/-KaDO6tjWXlQ/UgXhJg9rKWI/AAAAAAAAACw/gzsbhfRKqEo/s1600/nav.png);
clear: both;
overflow: hidden;
text-transform: uppercase;
height:48px;
}
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
padding: 12px 15px 14px;
color: #d9cca6;
font-size: 13px;
text-decoration: none;
font-family: oswald;
}
#menu{
text-align: center;
padding-right: 45px;
width: 950px;
margin: 10px auto 0px auto;
}
#menu li a:hover {
color:white;
}
#menu ul{
color: #fff;
box-shadow: 1px 1px 3px #000;
border-radius: 5px;
position: absolute;
z-index: 99999;
display: none;
list-style-type: none;
list-style: none;
width: 90px;
margin-left: 260px;
background: #66635B;
border: inset 1px #B0AFAB;
}
#menu ul li a:hover {
background-color: #93a613;
}
#menu li:hover > ul{
display: block;
}
</style>
<div id="nav">
<div class="wrap">
<ul id="menu">
<li>
<a href="/">INICIO</a>
</li>
<li>
<a href="#">DISEÑOS</a>
<ul>
<li>Diseños 1</li>
<li>Diseños 2</li>
<li>Diseños 3</li>
<li>Diseños 4</li>
</ul>
</li>
<li>
<a href="#">SERVICIOS</a>
</li>
<li>
<a href="#">ACERCA DE NOSOTROS</a>
</li>
<li>
<a href="#">CONTÁCTENOS</a>
</li>
</ul>
</div>
</div>
remplaza todos los CSS y agrega lo que falta y agrega el sub menu debjo de <li>diseño</li> tal cual esta... te recomiendo ver el demo.. esta mejor explicado
😛
