For increased accessibility, I've replaced "display:no ne" with the
Off-Left method of hiding my CSS drop-down menus because the Jaws
screen reader doesn't see any of the menus hidden with "display:no ne".
The Off-Left method (placing elements way over to the left beyond the
browser window) seems to work well in everything except IE 6 for the
PC, where it displays the drop-downs about an inch to the right of
where they should be. (View
http://www.sunriveronline.org/clrn/elrTEST.html with IE to see it in
action.)
How can I go about scooting the drop-down menus over to the left where
they should be in IE without messing it up in other browsers? The code
for my navigation bar is shown below. I suspect the problem has
something to do with the following IE workaround:
#nav li>ul {
top: auto;
left: auto;
}
Thanks in advance.
-Fleemo
------------------------------------------------
#nav {
padding: 0;
margin: 0;
position: absolute;
width: 877px;
top: 108px;
z-index: 1000;
white-space: nowrap;
}
#nav a {
font-size: .8em;
text-decoration: none;
padding-top: 6px;
font-weight: normal;
border-left: 1px solid #4B8EA6;
border-bottom: 1px solid #4B8EA6;
background-color: transparent;
}
#nav a:link { color: white; }
#nav a:visited { color: white; }
#nav a:hover { color: white; background-color: #0085CA; }
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav li li a {
display: block;
font-weight: normal;
color: #fff;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 10px;
background-color: #0085CA;
}
#nav li {
float: left;
position: relative;
width: 156px;
text-align: center;
cursor: default;
background-color: transparent;
list-style: none;
}
#nav li.homebttn {
float: left;
position: relative;
width: 66px;
text-align: center;
cursor: default;
background-color: transparent;
}
#nav li ul {
position: absolute;
top: 100%;
margin-left: -1999px;
font-weight: normal;
background-color: #1C6B8A;
padding: 0.5em 0 1em 0;
z-index: 10000;
}
#nav li>ul {
top: auto;
left: auto;
}
#nav li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
#nav li:hover ul, #nav li.over ul {
display: block;
margin-left: 0;
}