Variable Width Dropdowns with AnyLink

[Aubri]

1) Script Title: AnyLink CSS Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

3) Describe problem: I am using this with a block anchor in a table cell. Is there any way to make the dropdown fit with width of the cell, which varies based on the client's resolution? If not, can I do so if I switch to the JavaScript version of AnyLink?

As a very minor aesthetic issue, the anchor's Hover behavior ends when the user mouses over the dropdown. Is there a clever way to convince the computer that it's still hovering?



<div class="tablecontainer">
<table>
<tr>
<td>
<a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">OPTION 1</a>
<div id="submenu1" class="anylinkcss" style="display: block;">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li>(etc...)</li>
</ul>
</div>
</td>
<td>
<a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu2">OPTION 2</a>
<div id="submenu2" class="anylinkcss" style="display: block;">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li>(etc...)</li>
</ul>
</div>
</td>
<td>
And so on...
</td>
</tr>
</table>
</div>


This is the CSS involved:


.tablecontainer
{
position: relative;
}
.tablecontainer table
{
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
.tablecontainer td
{
padding: 0;
}
.tablecontainer td a
{
display: block;
}
.tablecontainer td a:hover
{
background-color: Red;
}

[ddadmin]

Hmm getting the drop down menus' widths to automatically fit the width of the containing table cell might prove difficult. Normally for an absolutely positioned DIV, to do this, you'd just set its width to 100%, but in this case, the script actually dynamically takes the drop down menu DIVs out of the regular document flow and moves them to the bottom of the page to avoid a potential positioning issue. So you're really left with just affecting the menu DIVs' height by using CSS to add an explicit width in explicit units (ie: px) to them, such as 300px. Switching to the JS version of the menu doesn't alter the situation unfortunately.


As a very minor aesthetic issue, the anchor's Hover behavior ends when the user mouses over the dropdown. Is there a clever way to convince the computer that it's still hovering?

Please read the section "Styling the currently selected anchor link" near the bottom of the script page. Basically you would style the "selectedanchor" class, which gets dynamically added and removed to the anchor depending on whether the mouse is over the drop down menu.

[Aubri]

Switching to the JS version of the menu doesn't alter the situation unfortunately.

Yeah, I wound up hacking the javascript to fetch the width of the anchor item and apply it to the menu on mouseover.