css top-menu not staying in hovered style when cursor moved to sub-menus - css

Question

I have a top menu bar and when the mouse hovers over each menu item it turns purple.
One of these menus also has a drop down list of further items. When I move the mouse cursor down through these sub-menus the top menu goes back to the original style. I would like it to stay purple even when I am hovering over the sub-menu items. Website is here, if you hover over sub-menu under "About" it shows the problem.
I have searched through a few similar stackoverflow answers. For example this problem and previous answer here. I tried a change from this
#topnav li a:hover {}
to
#topnav li hover:a {}
But neither this suggested change or the original keeps the top menu purple. Full code below:
#topnav {
clear: both;
background: url(nav-bg-orange.png) no-repeat;
height: 87px;
width: 962px;
padding: 6px 63px 6px;
}
#topnav ul {
list-style: none;
float: left;
}
#topnav ul li {
list-style: none;
float: left;
padding: 3px 0 0 0;
border-left: 1px dashed #f38739;
}
#topnav ul li:last-child {
border-right: 1px dashed #f38739;
}
#topnav ul li a {
float: left;
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 15px 20px 15px 20px;
border: 0;
outline: 0;
line-height: 1;
list-style-type: none;
text-transform: uppercase;
}
#topnav li#active a,
#topnav li:hover a {
color: #fff;
background: #745b7c;
display:block;
border-radius: 5px 5px 0 0;
}
/****************************** flyout menus ******************************/
#wsite-menus .wsite-menu li a {
font-family: Tahoma, Geneva, sans-serif;
padding: 11px;
color: #fff;
background: #745b7c;
border: 0;
border-bottom: 1px dashed #9e89a4;
}
#wsite-menus .wsite-menu li:hover a {
color: #fff;
background: #8c7395;
}

Answer 1

You might want to try putting your
#wsite-menus
menu nested in element with class
.wsite-nav-3
In that case it should work correctly.
<li id="pg524622535697207710" class="wsite-nav-3" style="position: relative;">About <div id="wsite-menus"><div class="wsite-menu-wrap" style="position: absolute; left: -1118px; display: block; top: 47px;"><ul class="wsite-menu" style="display: block;"><li id="wsite-nav-977240454937878932" style="position: relative;"><span class="wsite-menu-title">Hatha Yoga</span></li><li id="wsite-nav-788960178245244400" style="position: relative;"><span class="wsite-menu-title">Yin Yoga</span></li><li id="wsite-nav-226130023988115977" style="position: relative;"><span class="wsite-menu-title">Yoga for Men</span></li><li id="wsite-nav-104813911397431638" style="position: relative;"><span class="wsite-menu-title">Prenatel Yoga</span></li><li id="wsite-nav-176000207649938754" style="position: relative;"><span class="wsite-menu-title">Private Classes</span></li><li id="wsite-nav-558168910269966978" style="position: relative;"><span class="wsite-menu-title">Yoga for Business</span></li></ul></div></div> </li>
I haven't checked it on my own, but there's a good chance it's OK.

Answer 2

I asked a friend to take a look at this for me. In ordre to fix the menus I needed to change the javascript that currently animates the sub-menus. Unfortunately, because I'm using a Weebly based template I can't access this code to change it. So looks like a dead-end.

Answer 3

Excuse me. Are you new to CSS?
All you have to do is use UL:HOVER. That's because you're removing your mouse from the LI. So use UL as the trigger. Even if you change LIs, the UL won't go off. :)