Hola, les hago una consulta, sobre un menu que utiliza css. Al final del mensaje adjunto el codigo.
El problema que tengo, es al querer colocar bordes en las opciones de menu de nivel 2 y 3 (por ejemplo Opcion 2.2 o Opcion 2.3.2), los cuales quiero que sean naranja (#FF6600) como el menu princial. Probe distintas al ternativas pero no encuentro la solucion. Como esta el codigo actualmente toma un borde de color blanco, que entiendo "hereda" de algun elemento pero no me doy cuanta donde especificarle que use naranja en su lugar.
Espero que se entienda el problema. Al diseño como esta ahora, solo necesito que ademas tengan los submenu bordes naranjas (al seleccionarlos los bordes pasan a ser negros).
Desde ya muchas gracias por su gran ayuda.
Daniela
est.css
* {
margin: 0px;
padding: 0px;
outline: 0;
}
html, body {width: 100%;}
body {
color: #FFFFFF;
background-color: #000000;
padding: 0;
margin: 0;
border: none;
border-collapse:collapse;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#enc {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 80px;
margin: 0;
padding: 0;
background-color: #000000;
}
#enc p {
text-align: center;
}
#menu {
position: absolute;
left: 150px;
top: 80px;
width: auto;
height: 50px;
margin: 0;
padding: 0;
font-size: 0.7em;
background-color: #000000;
text-align: center;
}
#lat {
position: absolute;
left: 0;
top: 130px;
width: 150px;
height: auto;
padding: 0;
margin: 0;
background-color: #000000;
}
#cuer {
position: absolute;
left: 150px;
top: 130px;
width: auto;
height: auto;
padding: 0;
margin: 0;
background-color: #000000;
}
#menu ul {
list-style-type: none;
/*margin: 5px 0px 0px 0px; /* separacion de encabezado */
}
#menu ul li {width: 162px;} /* tamaño de opcion */
#menu ul li.nivel1 {
float: left;
margin-right: 1px; /* separacion entre opc ppal */
}
#menu ul li a { /* opcion ppal */
display: block;
text-decoration: none;
color: #000000;
background-color: #FFFFFF;
border: solid 1px #FF6600;
padding: 6px;
position: relative;
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: #99CC66;} /* color de opc de nivel 2 que tiene nivel 3 abajo */
#menu ul li a.nivel1, #menu ul li a.nivel2 {
display: block!important;display: none;
position: relative;
}
#menu ul li:hover {position: relative;}
#menu ul li a:hover, #menu ul li:hover a.nivel1 { /* selecciona opcion ppal */
background-color: #FF6600;
color: #FFFFFF;
position: relative;
}
#menu ul li ul {display: none;}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{
display: block;
position: absolute;
left: 0px; /* donde se alinea el nivel 2 bajo nivel 1 */
}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 { /* cuando se marca nivel 3 */
display: block;
position: absolute;
left: 161px!important;left: 160px;
top:0px!important;top: -21px;
border-color: #000000;
}
#menu ul li ul li a { /* nivel 2 */
width: 160px;
padding: 6px 0px;
border: solid 1px #FF6600;
}
#menu ul li ul li a:hover { /* cuando se marca nivel 2 */
border-color: #000000;
position: relative;
}
#menu ul li ul li ul li a.primera { /* primera opc nivel 3 */
border-color: #000000;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
HTML
(edito la primer linea porque no me la deja postear, tiene espacios de mas)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "h t t p ://w w w .w 3.o r g / T R / h t m l 4 0 / st r i c t . d t d ">
<html>
<head>
<title>xx</title>
<link media="screen" href="css/est.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style>
#menu ul li ul li a{margin-bottom:-1px;border-top-color: #fff;}
#menu ul.nivel2{margin-top: -1px;}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
#menu ul li ul li.nivel2:hover{margin-bottom:-2px;}
</style>
<![endif]-->
</head>
<body>
<div id="enc">
<p><IMG SRC="img/top.gif" WIDTH="473" HEIGHT="64" BORDER="0" ALT="Titulo"></p>
</div>
<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 2.1</a></li>
<li><a href="#">Opción 2.2</a></li>
<li class="nivel2"><a class="nivel2" href="#">Opción 2.3 »</a>
<!--[if lte IE 6]><a href="#" class="nivel2ie">Opción 2.3 »<table class="falsa"><tr><td><![endif]-->
<ul class="nivel3">
<li><a class="primera" href="#">Opción 2.3.1</a></li>
<li><a href="#">Opción 2.3.2</a></li>
<li><a href="#">Opción 2.3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<div id="lat">
<p>Lateral</p>
</div>
</body>
</html>