Buenas noches.
Hice un menú desplegable sencillo. El problema es que tengo un borde de 1px blanco que hace que cada bloque se vea separado, lo veo en Mozilla y Chrome.
Aún más, los bloques ocultos tienen 2px de separación (la suma del borde del bloque superior + el borde del bloque inferior)
No más vean el [URL="http://www.sembradordepaz.com/"]ejemplo[/URL]:
http://www.sembradordepaz.com/
Ah claro, y en IE se ve MUCHO PEOR
Aquí está el código del estilo:
Código PHP:
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px; list-style:none;}
h1 {font-size: 40px; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
h3 {text-align: center; font-size: 0.9em; text-decoration: underline;}
body {text-align: center; background-color:#808080; }
#global {width:900px ; margin:4px auto; border: 2px solid #808080; background-color: white; padding:0;}
#cabecera {height:200px; position:relative; z-index:2;}
#menu-horizontal {height: 49px; width: 900px; position:relative;
background: url("objetos/barra-menu-horizontal.png"); }
#menu-horizontal p {font-size: 6px;}
#menu-horizontal a {text-decoration:none; color: white;}
#menu-horizontal a:hover {text-decoration:underline; color:red;}
#menu-horizontal li {float:left ; list-style:none; height: 49px; width: 150px;
border: 0px; padding: 0px; display:block; position:relative;
font-family: calibri; font-size: 25px;}
#menu-horizontal > li:hover ul { display:block; left:0; top:49px;
position:absolute; background: url("objetos/barra-discipulado.png");}
#menu-horizontal li ul {display:none;}
#menu-horizontal li ul li { list-style-type:none; }
#menu-horizontal li ul li a { display:block; margin: 2px; }
Y acá un fragmento del código HTML del menú:
Código PHP:
<div id="global" <!-- Capa total para margen y centrado -->
<!-- INICIO CODIGO CABECERA -->
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.png"
alt="Haz clic aquí para volver a la página de inicio"></a>
</div> <!-- Fin div logotipo -->
<!-- INICIO CODIGO MENU HORIZONTAL -->
<ul id="menu-horizontal">
<li><p><br /></p><a href="index.html">Inicio</a></li>
<li><p><br /></p><a href="construccion.html">Discipulado</a>
<ul>
<li><p><br /></p><a href="construccion.html">¿Para qué?</a></li>
<li><p><br /></p><a href="construccion.html">Evalúate!</a></li>
</ul>
</li>
<li><p><br /></p><a href="articulos/El-firmo-con-su-sangre.html">Artículos</a></li>
<li><p><br /></p><a href="construccion.html">Foro</a>
<ul>
<li><p><br /></p><a href="construccion.html">Inicia sesión</a></li>
<li><p><br /></p><a href="construccion.html">Regístrate</a></li>
</ul>
</li>
<li><p><br /></p><a href="construccion.html">Descargas</a></li>
<li><p><br /></p><font color="white">Acerca de</font>
<ul>
<li><p><br /></p><a href="articulos/acerca-de-Dios.html">Dios</a></li>
<li><p><br /></p><a href="articulos/acerca-de-la-web.html">La web</a></li>
<li><p><br /></p><a href="construccion.html">El autor</a></li>
</ul>
</li>
</ul> <!-- Fin div menu-horizontal -->
</div> <!-- Fin div cabecera -->
<!-- FIN CODIGO CABECERA -->
Agradecimientos porque lean el código, lo traté de hacer lo más ordenado posible
