Sub-sub menu desplegable

WorldFox · #1 (**permalink**) 16/01/2012, 09:41

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.