| michael 2005-05-14, 7:47 am |
| Is it possible for a single-level css dropmenu, whereby headings are
aligned horizontally in navbar style, and their subpoints appearing
directly below on hover, to have the following list structure?:
<div id="menu">
<ul>
<li>heading1
<ul>
<li>subpoint1</li>
<li>subpoint2</li>
</ul>
</li>
</ul>
<ul>
<li>heading2
<ul>
<li>subpoint1</li>
<li>subpoint2</li>
</ul>
</li>
</ul>
</div>
I'm not quite sure how to get the sub-points back below the headings on
hover. My non-functional attempt below:
<style>
#menu ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu a {
display: block;
width: 10em;
}
#menu ul { float: left;
width: 10em;
}
#menu .sub li {
position: absolute;
width: 10em;
left: -999em;
}
#menu li:hover ul {
left:
auto;
}
</style>
<div id="menu">
<ul class="head low">
<li><a href="">heading1</a>
<ul class="sub">
<li><a href="">subpoint1</a></li>
<li><a href="">subpoint2</a></li>
</ul>
</li>
</ul>
<ul class="head low">
<li><a href="">heading2</a>
<ul class="sub">
<li><a href="">subpoint1</a></li>
<li><a href="">subpoint2</a></li>
</ul>
</li>
</ul>
</div>
Any pointers would be appreciated!
Michael
--
Faith is the quality that enables you to eat blackberry jam on a picnic
without looking to see whether the seeds move.
|