Tue, 2007-10-09 18:59
I have one of these menus working fine in Firefox but in IE, not so good. All of the tricks work but for an unknown (and unfathomable) reason, it jumps when hovered over in IE...and only once! From then on it is stable and works fine!???
Here is the CSS:
*{margin:0; padding:0;}
*html body{behavior:url(../j/csshover.htc);} /* the behavior element is for IE/Win only */}
div#menu{width:96%;height:5%;margin:2% auto;border:1px solid #F00;}
*html div#menu{margin:1% auto;}
*html ul#nav{margin:0 auto;padding:0 1em;}
div#menu ul#nav>ul.submenu a{width:auto;}
ul#nav{list-style:none;width:98%;text-align:center;font-size:0.9em;}
ul#nav li{float:left;position:relative;width:100px;border:1px solid #0000B4;border-width:1px 2px 2px 1px;margin:0 2px;font-weight:normal;padding:3px 0;color:#FFF;background-color:#087DC3;}
ul#nav li.xborder{border-width:1px 2px 2px 1px;}
ul#nav li a{text-decoration:none;padding-left:2px;}
* html ul#nav li{width:8em;}
ul#nav li:hover ul.subMenu,ul#nav li.over ul.subMenu{display: block;}
ul#nav li.bg-img{background:#087DC3 url(../i/dnarrow.gif) center right no-repeat;}
ul#nav li.bg-img:hover{color:#BCBCBC;}
ul.subMenu a:link, ul#nav li a:link{color:#FFF;text-decoration:none;}
ul.subMenu a:visited, ul#nav li a:visited{color:#D0D0D0;}
ul.subMenu a:hover, ul#nav li a:hover{color:#F00;text-decoration:none;}
ul.subMenu a:active, ul#nav li a:active{color:#000;}
ul.subMenu{display:none;position:absolute;top:1.5em;left:-3px;margin-top:8px;text-align:center;}
*html ul.subMenu{top:1.5em;left:-5px;}
ul.subMenu li{background-color:#087DC3;}
ul.subMenu li a{padding:2px 0 2px 2px;}
ul.subMenu li:hover{background:#E7E7E7;}
li > ul#nav{top:auto;left:auto;}
ul#nav li:hover ul.subMenu{display:block;list-style:none;}
.clearL{clear:left;}
.left-just{text-align:left;}
And here is the applicable HTML:
The JavaScript is in the section:
HTML:
It can be viewed online at: http://www.wordalone.org/index-x.shtml
Thanks!