Solo me funciona a partir de IE7
Publicado por Juan (2 intervenciones) el 09/04/2010 16:10:41
Hola hago el siguiente menu
<ul>
<li class="nivel1"><a href="index.php" class="nivel1" title="Pagina inicial">INICIO</a> </li>
<li class="nivel1"><a href="#" class="nivel1">1</a>
<ul>
<li><a href="11.php">1-1</a></li>
<li><a href="12.php">1-2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">2</a>
<ul>
<li><a href="21.HTML">2-1</a></li>
<li><a href="22.html">2-2</a></li>
<li><a href="23.html">2-3</a></li>
<li><a href="24.html">2-4</a></li>
</ul>
</li>
</ul>
Lo que pasa es que solo me funcion a partir de la version 7 o a traves de firefox, quisiera saber como puedo hacer para que me sirva para otras versiones. pongo el css del menu
#menu {
text-align: center;
font-size: 12px;
width: 990px;
height: 43px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 3px;
}
#menu ul {
list-style-type: none;
}
#menu ul li.nivel1 {
float: left;
width: 165px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: 45px;
font-weight: bold;
margin-top: 16px;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #000;
background-color: #f90e0e;
position: relative;
height: 25px;
padding-bottom: 8px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fff;
border-left-color: #fff;
}
#menu ul li:hover {
position: relative;
color: #FFF;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #000;
color: #FFF;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {
width: 159px;
border-top-color: #000;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
font-size: 13px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
<ul>
<li class="nivel1"><a href="index.php" class="nivel1" title="Pagina inicial">INICIO</a> </li>
<li class="nivel1"><a href="#" class="nivel1">1</a>
<ul>
<li><a href="11.php">1-1</a></li>
<li><a href="12.php">1-2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">2</a>
<ul>
<li><a href="21.HTML">2-1</a></li>
<li><a href="22.html">2-2</a></li>
<li><a href="23.html">2-3</a></li>
<li><a href="24.html">2-4</a></li>
</ul>
</li>
</ul>
Lo que pasa es que solo me funcion a partir de la version 7 o a traves de firefox, quisiera saber como puedo hacer para que me sirva para otras versiones. pongo el css del menu
#menu {
text-align: center;
font-size: 12px;
width: 990px;
height: 43px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 3px;
}
#menu ul {
list-style-type: none;
}
#menu ul li.nivel1 {
float: left;
width: 165px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: 45px;
font-weight: bold;
margin-top: 16px;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #000;
background-color: #f90e0e;
position: relative;
height: 25px;
padding-bottom: 8px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fff;
border-left-color: #fff;
}
#menu ul li:hover {
position: relative;
color: #FFF;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #000;
color: #FFF;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {
width: 159px;
border-top-color: #000;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
font-size: 13px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
Valora esta pregunta
0