Foros del Web » Creando para Internet » CSS »

Sub-sub menu desplegable

Estas en el tema de Sub-sub menu desplegable en el foro de CSS en Foros del Web. Saludos estoy desarrollando una página, de momento llevo esto: http://aventurarol.hostzi.com/probo.php El código es este: Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" ...
  #1 (permalink)  
Antiguo 16/01/2012, 09:41
 
Fecha de Ingreso: octubre-2011
Mensajes: 230
Antigüedad: 13 años, 1 mes
Puntos: 75
Sub-sub menu desplegable

Saludos estoy desarrollando una página, de momento llevo esto: http://aventurarol.hostzi.com/probo.php

El código es este:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">

<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="style.css" type="text/css" />
        <link rel="shortcut icon" href="img/favi.png">
		<title>Abogados Castaño</title>

<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
<style type="text/css">

HTML, body /*Afecta al body*/
{
margin-left:102px;
margin-right:34px;
background:url(img/bg.jpg) repeat;
}

.menu li /*La barra principal de pestañas*/
{
list-style-type: none;
float: left;
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
line-height: 80px;

padding:0px 0px 0px 0px;
width:184.99px;
border-right:solid #FFF 1px;
color:#FFF;
height:70px;
background:url(img/fenda.JPG);
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
text-align:center;
height: 65px;
line-height:67px;

}



.menu /*La clase menu completa incluyendo la barra y el desplegable*/
{
width:100%;

margin-left:-17px;
margin-top:-10px;
}

.menu ul li a /*Nombre pestaña principales */
{
text-decoration: none;

display: block;
position: relative;
width: 150px !importnat;

}



.menu ul>li:hover /*Cuando pasas sobre la barra principal*/
{
background:url(img/funda.JPG) repeat;
display:block;
}

.menu ul li ul span /*La felcha que une el desplegable con la barra*/
{
background: url(img/flecha.png);
opacity:1;
margin: -20px 40px;
width: 20px;
height: 10px;
position: absolute;
float:left;
}

.menu ul li ul /*El menu desplegable*/
{
display: none; 
padding: 10px 0;
position: absolute;
margin: -2px 0px;
.margin: 69px -170px;
_margin: 69px -170px;
background-color:#404040;

}


.menu ul li:hover ul /*Al pasar el mouse sobre pestañas del menu desplegable*/
{
display:block;
border-radius:0px 0px 10px 10px;
opacity:.9;

}

ul.menu > li
{
	display:block;
border-radius:0px 0px 10px 10px;
opacity:.9;
}






.titulo /*Nombre de la pagina y lema*/
{
    color: #141414;
    font-size: 30px;
    font-weight: bold;
	font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
	letter-spacing:-2px;
	margin-bottom:60px;
	margin-left:40px;

}

.lema /*Lema de pagina*/
{
	letter-spacing:-1px;
	line-height:0px;
	position:absolute;
	top:130px;
	left:540px;
}

.pagina /*pagina entera*/
{
background-color:#FFF;
margin-right:150px;
border-radius:2px 2px 2px 2px;
height:600px;
}


.spes /*Pestañas menu desplegable (Subpestañas)*/
{
float: none;
position: relative;

padding: 0 10px;
line-height: 30px;
background-color:#404040;
text-align:left;
width:163px;
border-radius:10px 10px 10px 10px;

}
.spes a /*Link de las subpestañas*/
{

color:#000;
text-decoration:none;

}

.spes:hover /*Al pasar el mouse sobre las subpestañas*/
{
background-color:#505050;	
}


.ppes a /*Pestañas barra principal*/
{
color:#FFF;	
}

.ima
{
margin-left:23px;
margin-top:3px;
width:95.5%;
height:300px;
}
</style>

</head>


<body>
<div class="pagina">
<div class="titulo"><h1>Castaño Penalva <span style="color:#FE0045; line-height:15px;"><br />Abogados</span></h1><span class="lema">Estamos a tu servicio</span></div>
<div id="contenido">
	<div class="menu">


	<ul style="display:block;">

    <li style="border-radius:10px 0px 0px 0px; margin-left:20px;">
    <div class="ppes"><a href="#">Inicio</a></div>
      <ul>
     
      </ul>
   </li>
		<li><div class="ppes"><a href="#">Servicios</a></div>
              <ul>
      <span></span>
        
         <div class="spes"><a href="#">Civil</a></div>
        <div class="spes"> <a href="#">Penal</a></div>
         <div class="spes"><a href="#">Laboral</a></div>
       <div class="spes"> <a href="#">Administrativo</a></div>
        <div class="spes"> <a href="#">Urbanístico</a></div>
         <div class="spes"><a href="#">Penal</a></div>
        <div class="spes"> <a href="#">Mercantil</a></div>
         
      </ul>
        </li>
		<li><div class="ppes"><a href="#">Nosotros</a></div>
		<ul> <span></span>
        
			<div class="spes"><a href="#">Conócenos</a></div>
			<div class="spes"><a href="#">Localizacion</a></div>
			<div class="spes"><a href="#">Trabajos</a></div>
           
		</ul>
		</li>

		<li><div class="ppes"><a href="#" >Historial</a></div>
		<ul><span></span>
			<div class="spes"><a href="#">Juicios</a></div>
			<div class="spes"><a href="#">Resoluciones</a></div>
			<div class="spes"><a href="#">Experiencia</a></div>
		</ul>
		</li>
        	<li style="border-radius:0px 10px 0px 0px;"><div class="ppes"><a href="#">Contacto</a></div>
		<ul><span></span>
			<div class="spes"><a href="#">Contactar</a></div>
			<div class="spes"><a href="#">Oficina</a></div>
		</ul></li>
		
	</ul>
	</div><!-- fin Menu -->
    <br />
    <div class="ima">
    <img src="img/home-abogados.jpg" class="ima"/>
    </div>

</div><!--  fin Contenido -->
</div>
</body>
</html>
Tuve un problema al hacer el menu desplegable porque donde estan los spes antes habían <li> pero me heredaba del primer <li> una cosa que no quería y tuve que hacer una chapuza.
Bueno, lo que quiero saber es con este código como hacer que al pasar el mouse sobre una pestaña del submenu deslplegable me salga otro menu, por ejemplo en civil que luego al lado salga contratos, derechos...

Saludos y gracias de antemano.

Etiquetas: contenido, desplegable, hover, html, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 07:39.