Problemas con Menú desplegable II

[annmancgraf]

Buenas, pude hacer mi menú desplegable, pero tengo el problema de que cuando voy a pasar el cursor hover no sale el submenú, dejo código
Gracias

HTML

<li>Arquitecto Pepe Peña</li>
<li><a class="pink" href="index.html"> INICIO </a></li>
<li><a class="pink" href="bio.html"> BIO </a></li>
<li><a class="pink" id="pro" href="#"> PROYECTOS </a>
<ul id="submenu">
<li><a href="#">RESIDENCIAS</a></li>
<li><a href="#">EDIFICIOS</a></li>
<li><a href="#">CHACRAS</a></li>
<li><a href="#">LOCALES COMERCIALES</a></li>
</ul>
</li>
<li><a class="pink"href="contacto.html"> CONTACTO </a></li>
</ul>

</div>

CSS

#sidebar.sinbarra {background-color:#FF9933;
width:100%;
height: 78px;
position: relative;
margin-top: -36px;
}
.sinbarra > ul {font-family:"Bebas Neue Book";
font-size:36px;
margin-left: 600px;}
ul > li {list-style-type:none;
float:left;
margin:10px;
margin-top: 25px;
}


#submenu {
font-size: 36px;
position: absolute;
left: 1005px;
width: 180px;
margin-top: 10px;
background-color:#FF9933;

}
#pro:hover #submenu {display: block; }
#submenu li {margin: 2px;

}
#submenu li a {
text-decoration: none;
color: #fff;
}

a.pink {text-decoration:none;
margin-right: 2px;
color: #fff;
}

[mbm150]

Hola,

en primer lugar debes añadirle display: none; a #submenu para ocultarlo y despues debes cambiar el selector CSSque has pues to para hover.

Código CSS:

/*Esto es lo que tienes*/
#pro:hover #submenu{display: block; } 
 
/*Esto es lo que debes poner*/
#pro:hover + #submenu{display: block; }
 

PD: De todas formas asi no funcionara bien, deberias cambiar la posicion de #pro, quitarlo del a y ponerlo en el li, y asi usando tu CSS funcionaria bien.

Código HTML:

<li id="pro"><a class="pink" href="#"> PROYECTOS </a>
 

Código CSS:

#pro:hover #submenu{display: block; }
 

Saludos.