Como poner dos menús css en una misma hoja??

[taoshi]

Hola tengo dos menús css uno horizontal y otro vertical que se cargan en la misma página a través de un include php cada uno, el menú horizontal pasa a ser vertical y compartiendo algunas propiedades del menú vertical


código des primer menú (horizontal):

Código:

<style type="text/css"> 
#menu { font-family:Calibri; height:34px; position:relative; background:#6679d2; -moz-border-radius:10px; -webkit-border-radius:10px; margin: 10px 0;}
#nav { margin:0px; padding:0px; position:absolute; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px; position:relative; padding:1px; width:40px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#3b4d83; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:10px; -webkit-border-radius:10px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
a {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:active {
	color: #000000;
}
a:hover {
	color: #000000;
}
</style>

código del segundo menú (vertical):

Código:

<style type="text/css"> 
ul {margin: 0;	padding: 0;	list-style: none;	width: 211px;}
ul li {	position: relative;	}
li ul {	position: absolute;	left: 300px; top: 0; display: none;	}
ul li a {	display: block;	text-decoration: none;	color: #777;	background: transparent;	padding: 5px;	border-bottom: 0;	}
ul {	margin: 0;	padding: 0;	list-style: none;	width: 211px;	}
ul li {position: relative;}
 
ul {margin: 0;	padding: 0;	list-style: none;	width: 211px;}
ul li {	position: relative;	}
li ul {	position: absolute;	left: 300px; top: 0; display: none;	}
ul li a {	display: block;	text-decoration: none;	color: #777;	background: transparent;	padding: 5px;	border-bottom: 0;	}
ul {	margin: 0;	padding: 0;	list-style: none;	width: 211px;	}
ul li {position: relative;}
li:hover ul { display:block; }
 
.style2 {
	font-family: Tahoma;
	font-size: small;
}
</style>

como hago para que que le menú horizontal nos e modifique por culpa de menú vertical.

PD: el que quiera la dirección web donde están los menús para ver mejor de lo que hablo que me lo diga y se la mando por PM.

[kseso?]

la clave está en "especificidad css"
Sé más específico en tus declaraciones:
ul li {...}
Afecta a todos los li de tu página.
#horizontal ul li {...} sólo a los li que estén dentro de una caja con: <div id="horizontal">
#vertical ul li {...} idem pero <div id="vertical">

[taoshi]

Gracias voy a mirar me imaginaba que podia ser algo asi tambien estaba por especificar los includes pero no estaba seguro de si era valido ni de como hacerlo como esto.

gracias

[taoshi]

Hola de nuevo.

He conseguido que el menú vertical no modifique al menú horizontal y viceversa y cada uno con sus propiedades tal y como dijiste ahora los submenus del menú vertical no salen paralelos a su menu correspondiente. gracias

estilo css del menú horizontal:

Código:

#menu { font-family:Calibri; height:34px; position:relative; background:#6679d2; -moz-border-radius:10px; -webkit-border-radius:10px; margin: 10px 0;}
#nav { margin:0px; padding:0px; position:absolute; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px; position:relative; padding:1px; width:40px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#3b4d83; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:10px; -webkit-border-radius:10px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
a {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:active {
	color: #000000;
}
a:hover {
	color: #000000;
}

y menú css horizontal

Código:

<div id="menu">
            <ul id="nav" style="left: 3px; top: 5px; height: 51px">
 
            <li style="left: 0px; top: 0px; width: 57px"><span>
			<a href="">Inicio</a></span></li>
            <li style="left: -8px; top: 0px; width: 81px"><span>
			<a href="">Situación</a></span></li>
            <li style="left: -15px; top: 0px; width: 108px"><span>
			<a href="">Instalaciones</a></span></li>
            <li style="left: -20px; top: 0px; width: 142px"><span>
			<a href="">Horarios y Cuotas</a></span></li>
            <li style="left: -28px; top: 0px; width: 96px"><span>
			<a href="">El Maestro</a></span></li>
            <li style="left: -36px; top: 0px; width: 105px"><span>
			<a href="">Musculación</a></span></li>
            <li style="left: -44px; top: 0px; width: 97px"><span>
			<a href="">Taekwondo</a></span></li>
            <li style="left: -52px; top: -1px; width: 70px"><span>
			<a href="">Aeróbic</a></span></li>
            <li style="left: -60px; top: 0px; width: 161px"><span>
			<a href="">Jeet Kune Do Murcia</a></span></li>
            <li style="left: 876px; top: -20px; width: 138px"><span>Otras actividades</span>
                <ul>
                    <li><a href="">Danza del Vientre</a></li>
                    <li><a href="">Step</a></li>
               </ul>
            </li>            
    </div>

estilo css del menú vertical: (edito)

Código:

#mene {margin: 0;	padding: 0;	list-style: none;	width: 211px;}
#nov ul li {	position: relative;	}
#nov li ul {	position: absolute;	left: 211px; display: none;	}
#nov li a {	display: block;	text-decoration:none;	color: #777;	background: transparent;	padding: 5px;}
#nov ul {	margin: 0;	padding: 0;	list-style: none;	width: 211px;	}
#nov ul li {position: relative;}
#nov li:hover ul { display: block; }

.style2 {
	font-family: Tahoma;
	font-size: small;
}

nota: ahora si sale el sub menú, pero no sale en linea con el menu

menú css vertical:(edito)

Código:

<div id="mene" style="height: 169px">
<ul id="nov"> 
    <li class="style2">Principal</li> 
    <li class="style2"><a href="#">Artículos y entrevistas</a></li> 
    <li><span class="style2"><a href="#">Conoce al instructor</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li>
    <li><span class="style2"><a href="#">Jeet Kune Do</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li><li><span class="style2"><a href="#">Filipino Martial Arts (KALI-ESKRIMA-ARNIS)</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li><li><span class="style2"><a href="#">Maphilindo Silat & Majapahit Martial Arts</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li>
    </ul>
</div>

nota: he metido el menú en una etiqueta <div>.

repito ahora el problema lo tengo con los submenus del menú vertical que no salen en linea con con el menú (si no, una linea por debajo)