Cita: Y pues en realidad el tono lo pones tu al leer (hay frases que ya tienen su esencia).
El tono es:
Carácter o modo particular de la expresión y del estilo de un texto. Por ejemplo, el tono de mi anterior mensaje era irónico. El de tu mensaje efectivamente era didáctico y algo severo. Lo cual no me gustó.
Cita: Pero vamos que alguien te diga que lo tu sabes que sirve, no sirve, es para
.
En ese caso, me alegro de que nuestra comunicación sea exclusivamente virtual
Bueno, en cualquier caso no tengo ánimo de seguir polemizando. Probablemente me precipité en mi tercer mensaje al no haber tenido oportunidad de probar el código, lo mismo que creo que tú podrías haber dicho las cosas de otra manera. Pero, efectivamente tenías tú razón y el código que me propusiste se adaptaba a lo que estaba buscando. Siento haber herido tu orgullo. Gracias por el código, he aprendido otra manera de hacer menus en horizontal.
Cita: Ahora estamos a la espera de ver ese menú (tu menu) perfectamente en IE
En cualquier caso he estado modificando tu código y he conseguido hacer exactamente lo que quería viéndose bien en ie9. Sin embargo, en mi página, aplicando el código exactamente igual, sigue sin funcionar, y no entiendo por qué. ¡¡¡Es desesperante!!!
Dejo ambos códigos y el enlace a la página por si tú o alguien se sigue sintiendo con el ánimo de ver dónde está el problema.
Este es tu código manipulado por mí para hacerlo lo más parecido a mi idea original (también he modificado ligeramente el html para que se adecue a la estructura html de mi página):
Código CSS:
Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gebremswar</title>
<style>
*{margin:0;padding:0;outline:0}
#wrapper{background:#CECECE;height:400px;margin:0 auto;overflow:hidden;width:700px; position:relative}
#menu {position:absolute;bottom:200px;width:73%;border-bottom:1px #FFF dotted}
#menu li{float:left;list-style:none;padding:2px 13px}
#menu li:before {color: #000;content: " • ";font-size: 1em;padding-right:3px}
#menu li > ul {opacity:0;float:none;position:absolute;visibility:hidden; left:0px}
#menu li > ul li {padding:10px 13px}
#menu li:hover > ul{opacity:1; visibility:visible}
</style>
</head>
<body>
<div id="wrapper">
<div>
<div>
<ul id="menu">
<li id="home">HOME</li>
<li id
="options"><a href
="#">OPTIONS</a
> <ul>
<li
><a href
="#">option A1</a
></li
> <li
><a href
="#">option A2</a
></li
> <li
><a href
="#">option A3</a
></li
> </ul>
</li>
<li id="about">ABOUT</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Este es mi código css siguiendo exactamente el código anterior:
Código CSS:
Ver original#menu-pages .menu {
position:absolute;
bottom:0px;
width:73%;
border-bottom:1px #FFF dotted;
}
#menu-pages .menu li {
float:left;
list-style:none;
padding:2px 13px
}
#menu-pages .menu li:before {
color: #FFF;
content: " • ";
font-size: 1em;
padding-right:3px
}
#menu-pages .menu li > ul {opacity:0;float:none;position:absolute;visibility:hidden; left:0px}
#menu-pages .menu li > ul li {padding:10px 13px}
#menu-pages .menu li:hover > ul{opacity:1; visibility:visible}
Dejo también el reset.css por si tuviese algo que ver, aunque no veo nada raro:
Código CSS:
Ver original/* RESET */
/* ----------------------------------------- */
/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0;}
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */
Gracias por tu ayuda y por las molestias que te has tomado.