I have been searching for a solution to my issue, but none of the suggestions seem to work for me. The problem I am facing is with a menu dropdown in the What's On section of a website I am currently developing.
Specifically, I am trying to keep the arrow background active when hovering over the dropdown list items, but I can't seem to figure it out.
HTML
<div class="Weekday">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Monday</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="../html/whats-on.html"><img src="../images/backgrounds/test.jpg" width="230" height="280" alt="" title="" /></a></li>
</ul>
</dd>
</dl>
</div> <!-- end Weekday div -->
CSS
.dropdown {float:left;}
.dropdown dt{width:114px;padding:0;font-weight:bold;cursor:pointer;line-height:50px;text-align:center;color:#193540;font-size:14px;letter-spacing:1px;text-transform:uppercase;}
.dropdown dt:hover {background:url(../images/backgrounds/bkg_nav-dropdown.png) center no-repeat;}
.dropdown dd {position:relative;left:-135px;overflow:hidden;width:250px;display:none;z-index:200;opacity:0;right:0;}
.dropdown ul {width:250px;list-style:none;}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited{display:block;background:#6ab7d3;width:250px !important;height:300px !important;}
.dropdown img{background:#6ab7d3;padding:10px;}