0

I have read a few solutions for this issue, but none of the answers help with my particular problem. I have a menu with a dropdown here on a site I'm developing in the What's On section.

http://www.staging.alexanderdzine.com.au/golden-sands-tavern-V2/

I want the arrow bg to stay active when I hover onto the dropdown li but can't 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;}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Glen
  • 1
  • 1

1 Answers1

0

this might be impossible to achieve in CSS, most people use jQuery for this type of things, but maybe you could try adding hover functionality to .Weekday, as its hover state will persist while you're hovering over submenus..

In case you'd like to achieve your desired functionality with jQuery, I suggest you read answers to this post: change background of parent div on hover

Also, this page uses the first method I mentioned - without any jQuery.

Community
  • 1
  • 1
Dygestor
  • 1,259
  • 1
  • 10
  • 20