Mi situacion ahora es la siguiente:
Tengo el siguiente menu:
Código:
y el css:<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<link href="style1.css" rel="stylesheet" type="text/css" />
<body>
<div id="content">
<div id="colOne" class="links" >
<div id="menu">
<ul>
<h6>Todos los productos</h6>
<li class="nivel1 primera"><a href="#" class="nivel1">Ediciones digitales</a>
<ul>
<li class="primera" ><a href="indexServlet?opcion=1">Busqueda avanzada</a></li>
<li><a href="indexServlet?opcion=2">Categorias</a></li>
<li><a href="indexServlet?opcion=3">Novedades</a></li>
<li><a href="indexServlet?opcion=4">Ofertas</a></li>
<li><a href="indexServlet?opcion=5">Más vendidos</a></li>
<li><a href="indexServlet?opcion=6">Editoriales</a></li>
<li><a href="indexServlet?opcion=7">Autores</a></li>
<li><a href="indexServlet?opcion=8">Libros digitales gratis</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Libros y revistas</a>
<ul>
<li class="primera">
<a href="indexServlet?opcion=9">Busqueda avanzada</a></li>
<li><a href="indexServlet?opcion=10">Categorias</a></li>
<li><a href="indexServlet?opcion=11">Novedades</a></li>
<li><a href="indexServlet?opcion=12">Ofertas</a></li>
<li><a href="indexServlet?opcion=13">Más vendidos</a></li>
<li><a href="indexServlet?opcion=14">Editoriales</a></li>
<li><a href="indexServlet?opcion=15">Autores</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Discos compactos</a>
<ul>
<li class="primera">
<a href="indexServlet?opcion=16">Busqueda avanzada</a></li>
<li><a href="indexServlet?opcion=17">Genero</a></li>
<li><a href="indexServlet?opcion=18">Novedades</a></li>
<li><a href="indexServlet?opcion=19">Ofertas</a></li>
<li><a href="indexServlet?opcion=20">Más vendidos</a></li>
<li><a href="indexServlet?opcion=21">Protagonistas</a></li>
<li><a href="indexServlet?opcion=22">Compañia</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1">Peliculas DVD</a>
<ul>
<li class="primera">
<a href="indexServlet?opcion=23">Busqueda avanzada</a></li>
<li><a href="indexServlet?opcion=24">Genero</a></li>
<li><a href="indexServlet?opcion=25">Novedades</a></li>
<li><a href="indexServlet?opcion=26">Ofertas</a></li>
<li><a href="indexServlet?opcion=27">Más vendidos</a></li>
<li><a href="indexServlet?opcion=28">Sello discografico</a></li>
<li><a href="indexServlet?opcion=29">Interprete</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Código:
Y cuando lo pruebo en iE7 no aprecen las opciones, pero en firefox funciona perfecto. Que podra ser?#menu {
text-align: left;
font-size: 0.7em;
width: 160px;
margin: 0px;
padding-bottom:8px;
}
#menu ul {
list-style-type: none;
border: 1px solid #7d7f74;
width: 160px;
}
#menu ul li.nivel1 {
border: none;
margin: 0px;
padding:0px;
background-color: #fff;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #000;
width:auto;
border-top: solid 1px #7d7f74;
margin:0px;
padding: 2px;
position: relative;
}
#menu ul li.primera a {
border: none;
}
#menu ul li:hover {
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
color: #000;
position: relative;
background-image:url("imagenes/bgmenu.jpg") ;
}
#menu ul li a.nivel1 {
display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
position: absolute;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 160px;top:1px!important;top: -31px;
}
#menu ul li ul li {
width: 159px;
margin: 0px;
padding:0px;
background-color: #fff;
border:none;
float:right;
display:inline;
}
#menu ul li ul li a {
width: auto;
border-top: solid 1px #7d7f74;
color: #000;
padding: 2px;
margin-left: 0px;
}
#menu ul li ul li a:hover {position: relative;
background-color: #D8d9ce;
color: #000;
}
.links h2 {
margin: 0;
padding: 3px 0 2px 10px;
background: #D4D5D0;
font-size: 1.1em;
color: #111111;
}
.links h3 {
margin: 0;
font-size: 1em;
}
.links ul {
margin: 0;
padding: 0;
color: #CADAFF;
list-style: none;
}
.links li{
padding: 2px;
border-bottom: 2px solid #D4D5D0;
color:#000;
}
.links a{
color: #111111;
margin-left: 10px;
text-decoration: none;
}
.links-content {
background: #FFFFFF;
border: 1px solid #7d7f74;
margin: 0 0 10px 0;
width:160px;
}
.links-content2 {
background-color:#D8D9CE;
border: 1px solid #7d7f74;
margin: 0 0 10px 0;
width:160px;
}
Gracias
