Buenas,
estoy haciedo una web y tengo un problema, de repente de apareció una linea como en color CYAN, como la image Anexa. (vale resaltar que esto solo pasa en Firefox y no en Internet Explorer.
Cuando quíto la capa "encabezadomenu" la linea desaparece
Código PHP:
<div id="encabezadomenu">
<!--Inicio Capa Menu Listas desplegables-->
<ul class="menu">
<li class="drop">
<a href="#">Elige tu ciudad...</a>
<span class="toggle"> </span>
<ul>
<?php do { ?>
<li><a href="index.php?ciudad=<?php echo $row_CiudadIndex['id']; ?>"><?php echo $row_CiudadIndex['nombre']; ?></a></li>
<?php } while ($row_CiudadIndex = mysql_fetch_assoc($CiudadIndex)); ?></ul></li>
</ul>
<ul class="menu">
<li class="drop">
<a href="#">Elige una categoría...</a>
<span class="toggle"> </span>
<ul>
<?php do { ?>
<li><a href="index.php?ciudad=<?php echo $ciudad ?>&categoria=<?php echo $row_CategoriaIndex['id'] ?>"><?php echo $row_CategoriaIndex['nombre']; ?></a></li>
<?php } while ($row_CategoriaIndex = mysql_fetch_assoc($CategoriaIndex)); ?></ul>
</li>
</ul>
<!--FIN Capa Menu Listas desplegables-->
<!--Inicio Capa Buscador-->
<div id="buscador">
<form id="form1" name="form1" method="post" action="">
<label>
<font color="#FFFFFF"><strong>Buscador:</strong></font>
<input name="textfield" type="text" size="18" />
</label>
<label>
<input name="Submit" type="image" value="Enviar" src="img/buscar.png" align="top" />
</label>
</form>
</div>
<!--Fin Capa Buscador-->
<div id="menu2">
<ul class="menu">
<li><a href="#">Club Insittu</a></li>
</ul>
<ul class="menu">
<li><a href="#">Juegos</a></li>
</ul>
<ul class="menu">
<li><a href="#" title="Información de interes sobre tu ciudad">Info de Interés</a></li>
</ul>
</div>
</div>
el CSS es:
Código HTML:
#encabezadomenu {
float:left;
height: 50px;
position: relative;
width:845px;
top: 20px;
z-index: auto;
}
#menu2 {
float:left;
height: 50px;
position: relative;
width:270px;
}
/* menu desplegable*/
ul.menu {
float: left;
list-style-type: none;
margin: 0;
padding-top: 0;
padding-right: 3px;
padding-bottom: 0;
padding-left: 3px;
}
ul.menu li {
display: block;
float: left;
height: 30px;
margin: 0;
padding: 0;
position: relative;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
z-index: 1;
}
ul.menu li:hover {
-moz-border-radius: 4px;
background-color: #264E75;
}
ul.menu li a {
color: #FFF;
display: block;
float: left;
font-weight: bold;
text-decoration: none;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
line-height: 18px;
}
ul.menu li a span {
font-weight: normal;
padding-left: 2px;
}
ul.menu li.drop a {
padding-right: 1px;
font-size: 11px;
}
ul.menu li.drop:hover li {
border: none;
}
ul.menu li.drop span.toggle {
display: block;
float: left;
height: 26px;
padding: 0;
width: 20px;
left: 1px;
right: 1px;
background-attachment: scroll;
background-color: transparent;
background-image: url(img/URL_toggle.png);
background-repeat: no-repeat;
background-position: 0 5px;
margin-right: 1px;
margin-bottom: 0;
margin-left: 1px;
top: 50%;
}
ul.menu li.drop:hover {
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
ul.menu li.drop:hover ul {
display: block;
padding: 0 0 10px 0;
z-index: 1;
}
ul.menu li ul {
background-color: #555;
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 30px;
width: 100%;
font-size: 11px;
}
ul.menu li ul li {
border: none;
float: none;
height: auto;
margin: 0;
padding: 0;
}
ul.menu li ul li a {
background-color: transparent;
color: #DDD !important;
display: block;
float: none;
font-size: 13px;
font-weight: normal;
height: auto;
margin: 0;
padding: 5px 15px;
}
.ciudadcategoria {
font-size: 14px;
color: #003399;
text-shadow: #999999 0.05em 0.05em 0.05em;
font-family: Georgia, "Times New Roman", Times, serif;
}
ul.menu li:hover ul {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border: none;
background-color: #555;
}
ul.menu li:hover ul * {
-moz-border-radius: 0;
background-color: transparent;
}
ul.menu li ul li:hover {
background-color: #000;
}
Como puedo solucionar esto?