I am putting in a simple suckerfish dropdown menu in a section of a
proposed website. I hope its ok to attach to small images as I have
no other way to link this.
I am wondering why the width of level 2 is wider than level 1 in IE
and are the same width in other browsers. I haven't figured out where
the width is controlled from in the level two boxes.
This is a piece of the code
<ul id="nav"><li>EWR Navigation <br >
<ul >
<li ><a href="" >EWR Home Page</a></li>
<li ><a href="" >Getting Started</a></li>
<li ><a href="" >FAQ</a></li>
</ul>
</li>
<li>Downloads <br >
<ul >
<li ><a href="" >Microsoft® Excel Templates</a></li>
<li ><a href="" >XML</a></li></ul></li></ul>
CSS coding
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
font-weight: bold;
}
#nav a {
display: block;
width: 10em;
text-decoration:none;
}
#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
background-color:#eeeeff;
margin: 3px 3px -4px 7px;
padding: 4px;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /*using left instead of display to hide menus because
display: none isn't read by screen readers */
margin-top: .1em;
margin-left: -.95em;
}
IE 6 only #nav li ul {margin-left: -1.5em; }
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered
list items */
left: auto;
}
#nav li ul li {background-color: #ffffff; }
#nav li ul l#nav li ul li {background-color: #ffffff; }
#nav li ul li a {font-weight: normal; border-bottom: 1px solid
#999999; padding-bottom: .2em}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
