Mostly I need to figure if I'm wasting my time or if there is a way to
do what I am trying to do. I am an intermediate to CSS at best so
please don't flame me, just trying to do my job here.
I came across this article when I searched for a CSS solution to long
winded DHTML dropdown menus.
http://www.alistapart.com/articles/dropdowns/ I did get it to work but
here's my problem. What I "did" get to work was a horizontal drop in a
single table cell, e.g. I have this large opening background image in
single cell with this menu residing inside of it. Here it works fine.
I have another page where I have the same style dropmenu (vertical in
this case). It drops fine. My problem: the menu resides in a cell
with a background at the top of the page. The menu drops over the cell
below but when the primary hover target (for lack of a better way to
describe it) loses focus the sub items disappear.
My question: are the dropped sub-items disappearing because this can't
be done across table cells? Or is there a way to do this? Here are
the relevant items from the style sheet. The html that I am using is
below this. This is an IE js that is also needed but I've left it out
unless someone thinks it will help with an answer.
Thanks!
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
font-size: 12px;
}
li { /* all list items */
float: left;
position: relative;
width: 100px;
padding : 5px;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 30px;
left: 0;
}
li>ul { /* to override top and left in browsers other than IE, which
will position to the top right of the containing li, rather than bottom
left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#content {
clear: left;
}
<body>
<table cellpadding="20 " cellspacing="0" border="0" align="center"
width="100%" height="100%" class="outterBo dy">
<tr>
<td align="center" valign="middle" height="550"><!--outterBody Cell
opens here -->
<table border="0" cellpadding="0" cellspacing="0" width="750"
height="550" class="innerBod y"><!--innerBody table starts here-->
<tr>
<td background="new Banner.jpg" width="750" height="140">&n bsp;
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="100">&n bsp;
</td>
</tr>
<tr>
<td height="25" align="right">
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Events Calendar</a></li>
<li><a href="#">Announ cements</a></li>
</ul>
</li>
<li><a href="#">Consul ting</a>
<ul>
<li><a href="#">Qualit y Management Systems</a></li>
<li><a href="#">Labora tory Accreditation</a></li>
<li><a href="#">Enviro nmental Management Systems</a></li>
</ul>
</li>
<li><a href="#">Traini ng</a>
<ul>
<li><a href="#">Qualit y Management</a></li>
<li><a href="#">Busine ss Management</a></li>
<li><a href="#">Operat ions Management</a></li>
</ul>
</li>
<li><a href="#">Other Services</a></li>
<li><a href="#">Resour ces</a></li>
<li><a href="#">Contac t Us</a></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
