Hey guys,
I am using the suckerfish dropdown menu as a dropdown list. Kind of faking an option list so to speak. The problem is:
I have a dropdown list and content dynamically appears below it when an option is clicked, but the dropdown menu stays over top of the dynamically loaded content and you cannot see the content unless you move your mouse away from the menu and click outside of it.
I was wondering if there was a way so when an option is selected from the list OnClick the list goes away (just becoming deselected and not just hiding the div, as users need the option to go back to the list to select different options if they wish.)
HTML:
<div id=“contactDrop”>
<ul id=“contactDroplist”>
<li><a href=“#” class=“selectCountry”>Select your country</a>
<ul>
<li><a href=“javascript:loadContent(2);”>South Africa</a></li>
<li><a href=“javascript:loadContent(3);”>Australia</a></li>
<li><a href=“javascript:loadContent(4);”>Finland</a></li>
<li><a href=“javascript:loadContent(5);”>Germany</a></li>
<li><a href=“javascript:loadContent(6);”>Sweden</a></li>
<li><a href=“javascript:loadContent(7);”>UK</a></li>
<li><a href=“javascript:loadContent(8);”>Canada</a></li>
<li><a href=“#”>USA</a>
<ul class=“contactInnerdrop”>
<li class=“stockistRight”><a href=“javascript:loadContent(9);”>California</a></li>
<li class=“stockistRight”><a href=“javascript:loadContent(10);”>Tennessee</a></li>
<li class=“stockistRight”><a href=“javascript:loadContent(11);”>Louisiana</a></li>
</ul>
</li>
</ul></li>
</ul>
</div>
Here is the CSS:
#contactDroplist, #contactDroplist ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#contactDroplist a {
display: block;
width: 10em;
color:#19261F;
}
#contactDroplist a:hover {
color:#e5e5e5;
}
#contactDroplist li { /* all list items /
float: left;
width: 10em; / width needed or else Opera goes nuts */
}
#contactDroplost li ul a{color:#19261F;}
#contactDroplist li ul { /* second-level lists /
position: absolute;
background: #717171;
width:255px;
padding:5px 0 5px 5px;
margin-left:10px;
font-size:0.9em;
left: -999em; / using left instead of display to hide menus because display: none isn’t read by screen readers */
}
#contactDroplist li ul li{margin-bottom:8px;}
#contactDroplist li ul ul { /* third-and-above-level lists */
margin: 0 0 0 -5px;
padding:0 0 0 5px;
}
#contactDroplist li ul ul li{margin-bottom:3px;}
#contactDroplist li:hover ul ul, #contactDroplist li:hover ul ul ul, #contactDroplist li.sfhover ul ul, #contactDroplist li.sfhover ul ul ul {
left: -999em;
}
#contactDroplist li:hover ul, #contactDroplist li li:hover ul, #contactDroplist li li li:hover ul, #contactDroplist li.sfhover ul, #contactDroplist li li.sfhover ul, #contactDroplist li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#contactDroplist a.selectCountry {
width:320px;
height:28px;
background: url(…/images/contactForm/dropdownBTN.png) top left no-repeat;
padding:10px 0 0 10px;
}