Open
this webpage in Internet Explorer. Now, navigate the CSS menu on the left-hand side. Mouseover "About Us," then attempt to scroll over one of the sub-menus that come up.
Having trouble? The menus disappear after the mouse is moved slightly, and often times it is impossible to even get the sub-menus to highlight. Can anyone help me with the CSS coding? I believe there is a bug with IE that doesn't allow the sub-menus to be navigated, but I don't know what. It works in Mozilla, Opera, and other browsers.
Code:
BODY {font-family:"arial narrow" "arial" "helvitica"; font-size:12; margin-left:50px; padding:0px; padding-top:0px}
P {font-family:"arial narrow"; font-size:12;}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: transparent;
padding: 5px;
border: 0px solid #ccc;
border-bottom: 0px;
}
ul li a:hover{color:#777;
background:#eff6f8}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 0px solid #ccc;
}
li:hover ul, li.over ul { display: block; }
#nave-menu{
width:30em
}
There is the CSS coding ("View Source" for HTML part of webpage), can anyone help fix this bug?