Menu desplegable con css solo ciertas areas

[ramses1437]

Buen dia, mi cuestion es esta, estoy trabajando en un menu desplegable, pero solo quiero que sea desplegable ciertas partes, la estructura es asi:


Inicio
subinicio1
subinicio2


Menu 2
submenu1
submenu2

Menu 3
*submenu1
subsubmenu1
subsubmenu 2
submenu2
submenu3
*submenu4
subsubmenu1
subsubmenu 2

Es decir que todo se muestre, a excepcion de los que tienen asterisco, que si quiero que sean desplegables solo con hover... alguien tendria una idea?, gracias

[refielt]

armalos listas "ul li" en display block y a los desplegables aplicale una clase para identificarlos. dentro del menu li inserta otro menu "ul li" como display none, y en el evento hover de las li con la "clase" dale display block. lo puedes hacer sin necesidad de javascript ni jquery y usa transition si quieres animacion.

[pzin]

Tampoco estaría de más que pusieras tu código. Sin eso poco te vamos a poder ayudar.

[ramses1437]

uchas gracias, lo he hecho con las bases que me haz dado y ya me sale, solo una cuestion, me salen atras del menu, no me sale a un lado, como podria acomodar esto?? el codigo es el siguiente:

Código CSS:

.videoz ul li{
    float:left;
    position:relative;
    width:120px;
        
 
}
 
.videoz ul a{
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    font-weight:bold;
    display:table-cell;
    vertical-align:middle;
    width:130px;
    height:25px;
    text-align:center;
    background:#090;
    color:#FF0;
    text-decoration:none;
    border:1px solid #030;
    padding:0;
    margin:0;
 
}
 
.videoz ul p{
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    font-weight:bold;
    display:table-cell;
    vertical-align:middle;
    width:130px;
    height:25px;
    text-align:center;
    background:#090;
    color:#FF0;
    text-decoration:none;
    border:1px solid #030;
    padding:0;
    margin:0;
}
 
 
.videoz li:hover > a{
    background:#060;
    color:#FFF;
    padding:0;
    margin:0;
}
 
 
.videoz li > ul {
    display:none;
    position:absolute;
    left:0;
    top:100%;
    padding:0;
    margin:0;
}
.videoz li:hover > ul{
    display:block;
    padding:0;
    margin:0;
}
 
.videoz li > ul li{
    padding:0;
    padding-top:1px;
    margin:0;
}
 
.videoz li > ul li >ul{
    left:100%;
    top:0;
    padding-left:1px;
    margin:0;
}
 
.videoz li > ul li > ul li{
    width:130px;
    padding-left:2px;
}
 

[refielt]

pon en tu "li" padre position: replative; y al "ul" hijo position absolute; luego mueve el ul con left y top a tu gusto. si se ve detras aplica z-index:2;

[ramses1437]

Olvidenlo, ya lo he podido resolver, muchas gracias a los dos por su tiempo.

Lo unico que modifique fue el padding para su ubicacion. en
.videoz li:hover > ul{

[refielt]

un consejo, esta bien que uses selectores css pero en estos casos es mejor definir clases, para un mejor manejo y evitar cualquier curce entre estilos.
de esa forma si tu menu sigue criendo podrias tener problemas