Hi -
I've been experimenting with ALA's suckerfish menu. In my draft version, I'm unable to get rid of a block of color on the right side of the drop down menu. Can someone please look at my (feeble) coding and figure out what I've inserted and/or omitted that causes this problem?
#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 */
}
#nav li a {background-color: #004455; color: white;}
#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 */
background-color: #004455;
}
#nav li ul li {
font-size: 85%;
background-color: #004455;
}
#nav li ul li.bottom {
border-bottom: 0;
}
#nav li ul li a {
background-color: #ffffff;
color: black;
border-top: 0 solid #004455;
border-right: 1px solid #004455;
border-left: 1px solid #004455;
border-bottom: 1px solid #004455;
padding: 2px 4px;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
<body>
<h1>KDLA 2004-2005 Annual Report</h1>
<div style="width: 800px; height: 18px; background-color: #004455; padding: 10px;">
<ul id="nav">
<li><a href="#">Customer Service</a>
<ul>
<li><a href="#">Summer Reading</a></li>
<li><a href="#">State Library</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Partnership with Friends of Kentucky Public Archives</a></li>
<li class="bottom"><a href="#">Talking Books</a></li>
</ul>
</li>
<li><a href="#">Technology</a>
<ul>
<li><a href="#">Catalog</a></li>
<li><a href="#">Interlibrary Loan</a></li>
<li><a href="#">Digitization</a></li>
<li><a href="#">Scanning</a></li>
<li class="bottom"><a href="#">Website</a></li>
</ul>
</li>
</ul></div>
<div style="clear: left;">
<h1>Heading 1 Example</h1>
<p>Paragraph Example: Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
<h2>Heading 2 Example</h2>
<p>Paragraph Example with Links: Lorem ipsum dolor sit amet, <a href="#">consetetur
sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est <a href="#">Lorem ipsum dolor sit amet</a>.</p>
<h3>Heading 3 Example</h3>
<p>Paragraph Example: Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
FYI
* My screen resolution is set at 1680x1050
* I'm accessing your site through a T1 line
* I'm probably viewing it using Firefox (unless browser is specified)
FYI
* My screen resolution is set at 1680x1050
* I'm accessing your site through a T1 line
* I'm probably viewing it using Firefox (unless browser is specified)
FYI
* My screen resolution is set at 1680x1050
* I'm accessing your site through a T1 line
* I'm probably viewing it using Firefox (unless browser is specified)
Reply With Quote
Bookmarks