Hi, I hope someone can help with this, it is driving me bonkers. After
reading the Suckerfish Dropdown article on A List Apart, I decided to try
and create a side menu based on the code I'd seen. Note that this is an
experiment and I'm only trying to get it to work in Firebird 0.7 at the
moment. Once it is working in Firebird, I'll look at adding any IE
workarounds, starting with those in the Dropdown article.
Here is the code I've got at the moment;
<html>
<head><title>Tester</title></head>
<style>
ul {
list-style: none; /* Remove list bullets */
background: #ddd; /* Grey background */
border: thin solid black; /* Menu border */
padding: 0; /* Remove bullet indent */
width: 7em; /* Force a thin menu */
}
li { /* Space out menu lines a bit more */
padding: 2px;
}
li > ul {
display: none; /* Hide sub menus */
width: auto;
position: absolute; /* Take sub menus out of the normal flow */
}
/* Show the sub elements for the top level item hovered over */
li:hover > ul {
display: inline; /* Display sub menu block on the same line as top level item */
}
li:hover {
background: #aaa; /* Darken the item we are on */
cursor: default; /* Retain a pointy arrow */
}
</style>
<body>
<ul class="top">
<li>Main item 1
<ul class="sub">
<li>
Sub1 Item1
<ul class="sub">
<li>Sub2 Item1</li>
<li>Sub2 Item2 a bit longer</li>
<li>Sub2 Item3</li>
</ul>
</li>
<li>
Sub1 Item2 a bit longer
<ul class="sub">
<li>Sub2 Item1</li>
<li>Sub2 Item2</li>
<li>Sub2 Item3 a bit longer</li>
</ul>
</li>
<li>Sub1 Item3</li>
</ul>
</li>
</ul>
</body>
</html>
When I just had the 'main' and 'sub1' stuff, everything looked fine.
Problems began when I added the sub2 items. Although the text seems OK,
the bordered background to the UL tag seems to be getting constrained by
the border of the higher level UL.
I've looked at the CSS2 specification, hunted around on various websites,
and tried random alteration and movement of various parts of the
stylesheet, but nothing seems to be helping. Can someone point me in the
right direction, or better yet solve the problem and then explain the
answer!
Many thanks in advance.
