Problema con el hover y sub-menu desplegable

Buenas!

Estoy haciendo una pagina web para un amigo, pero me tope con un problema. En la barra de menu se me ocurrio que podria ponerle una imagen atras de cada seleccion y que se mostrara cuando le pasara el mouse por encima, para eso use la etiqueta hover. El problema es que en 2 de los botones funciona el efecto pero en los otros 2 no. Pienso que el problema puede ser que en los 2 botones les agregue un sub-menu emergente.

Ya he probado lo que se pero no se arregla, si pudieran ayudarme estaria genial. Les dejo el archivo .css y el link de la pagina para que vean mi problema:

Pagina Web

Codigo Css:

Código HTML :

/* Codigo del Menu */
menu
{
   height:216px;
   margin-top:-105px;
     margin-right:67px;
   background:url(../img/nav.png) right no-repeat; 
}

/* Codigo para hacer que ul li se pongan de manera horizontal */
menu ul li
{
   display:inline;
}

/* Codigo ul li a del Menu*/
menu ul
{
   margin:0 10px 10px 610px;
}

menu li a
{
   position:relative;
   width:70px;
   color:#861a1a;
   font-size:22pt;
   line-height:215px;
   text-align:right;
   text-decoration:none;
   padding:280px 0 10px 20px;
}

/*Efectos para que cambie el texto en la barra de menu cuando se le pase el mouse */
.inicio:hover
{
   /* Inicio */
   color:#FFF;
   background:url(../img/inicio.gif) center bottom no-repeat;
   height:1000px;
   padding: 70px 0 55px 58px;
}

.info:hover
{
   /* Informacion */
   color:#FFF;
   background:url(../img/info.gif) right bottom no-repeat;
   padding:100px 0 -10px 55px;
}

.cpanel:hover
{
   /* Control Panel */
   color:#FFF;
   background:url(../img/cpanel.gif) right bottom no-repeat;
   padding:30px auto;
}

.foro:hover
{
   /* Foro */
   color:#FFF;
   background:url(../img/foro.gif) right bottom no-repeat;
   margin-right:10px;
   padding:170px 25px 20px 20px;
}

/*Codigo para el sub-menu*/
menu ul li ul
{
   display:none;/* Para que el sub.menu no aparezca */
   position:fixed; /* Esta posición es relativa al <li> que contiene a este <ul> */
      top:50px;
   left:100px; /* Para que no monte sobre el <li> */
      list-style:inside;
}

#sub-menu-left
{
   background: url(../img/sub-menu-left.png) left center no-repeat;
}

#sub-menu
{
   background:url(../img/sub-menu.png) center center repeat-x;
   padding: 21px 10px 19px 0;   
}

#sub-menu-right
{
   background:url(../img/sub-menu-right.png)
}

/* Codigo para que aparezca el sub-menu cuando se le pase el mouse por encima al item*/
menu li:hover ul
{
   display:block;
}

/* Codigo para dar estilo a li y a */
menu ul li ul li a
{
   color:#7087a3;
   font-size:13pt;
}

Gracias por su atencion.

Saludos!

Regalale una altura definida a tu menú y a sus elementos. No te recomiendo nada hacer submenus con CSS directamente, utiliza algún plugin, es mucho más funcional.

Suerte.

Perdona la molestia, pero soy nuevo con el CSS, me podrias dar un ejemplo de como hacerlo?

Y con decir plugin te refieres a javascript, cierto?

PD: Gracias por responder!

Juas, escribí plugin? Si me refiero a javascript.

Revisa ejemplos de como hacer un menu con jQuery (usa google), cuando encuentres uno efectivo empieza a manipular para meter tus propios estilos. Verás que fácil es.

Suerte.

Ya logre arreglarlo y hasta le pude dar un mejor efecto con javascript. Muchas gracias!

Saludos!