Flex Level Drop Down Menu Parent Hover Effect

[victory1]

1) Script Title: Flex Level Drop Down Menu (v1.2)

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

3) Describe problem: How to keep the hover parent link active when the dropdown child menu is active? Right now when I hover on it it's active but once I move on to the dropdown, no longer have the hover effect.
Link to site if needed: http://www.sonyreaderboards.com

http://i.imgur.com/T1S7O.jpg
http://i.imgur.com/wwRo2.jpg

Here's the menu CSS


.menu li a{
background: #0D0D0D url("{T_THEME_PATH}/images/bg_navmenu.gif") repeat-x;
color: #FFFFFF;
display: inline-block; /* <== INSTEAD block use inline-block */
line-height: 35px;
margin: 0px;
padding: 0px 7px;
text-align: center;
text-decoration: none;
}


/*----- menu hover -----*/
.menu li a:hover {
background: #0D0D0D url("{T_THEME_PATH}/images/bg_navmenu2.gif") repeat-x;
text-decoration: none;
color: #F7F7F7;
font-weight:bold;
}

Here's the menu item

<li><a href="{U_ABOUTUS}" title="About Us" data-flexmenu="flexmenu1">Info <img src="{T_THEME_PATH}/images/arrow-down.gif" width="11" height="7" alt="Info" /></a>
<!--HTML for popup Menu 1-->
<ul id="flexmenu1" class="flexdropdownmenu">
<!-- IF U_ACP --><li><a href="{U_ACP}" onclick="window.open(this.href);return false;">ACP</a></li><!-- ENDIF -->
<li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<li><a href="http://sonyreaderboards.com/wiki/index.php/Main_Page" title="SRF Wiki">Wiki</a>
<ul>
<li><a href="#"><img src="{T_THEME_PATH}/images/troubleshootingicon.png" width="12" height="12" alt="Troubleshooting" /> Troubleshooting Database</a></li>
<li><a href="#"><img src="{T_THEME_PATH}/images/readericon.png" width="12" height="12" alt="Readers" /> Sony Readers</a></li>
<li><a href="#"><img src="{T_THEME_PATH}/images/sonytableticon.png" width="12" height="9" alt="Tablets" /> Sony Tablets</a></li>
</ul>
</li>
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- ENDIF -->
<!-- IF U_CLASSIFIEDS --><li><a href="{U_CLASSIFIEDS}" title="{L_CLASSIFIEDS}">{L_CLASSIFIEDS}</a></li><!-- ENDIF -->
<li><a href="{U_RULES}">{L_M_RULES}</a></li>
</ul></li>

[victory1]

Still looking for help on this.:) Thanks

[ddadmin]

Sure, try the below modified .js file. It dynamically adds a class of .selected to the anchor link while its drop down menu is revealed, and removes the class when it's hidden. To give the anchor a background of yellow when its sub menu is open then, you'd simply define the desired style inside this class:


.selected{
background: yellow;
}

[victory1]

It works perfectly! Thank you!:)

[Paramasivan]

Is this possible for jQuery Multi Level CSS Menu #1

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/

?

[victory1]

I had to remove the Resolved prefix because I discover a new issue.

I've put the below code in the flexdropdown.css

.selected{
background: #303030;
}

The problem is that I have an IM modification with a socialnet.css file that has this code below


.snImLogin.selected {
background-position: 0 -15px;
}

.snImLogin.selected span {
background-position: left -45px;
color: #fff;
}

The .selected is also adding a background on the above

The first image is what it suppose to look like. The second image is when I have the .selected code in flexdropdown.css

[ddadmin]

This is simply an issue with your CSS rule for the flex anchor not being specific enough to insulate other elements with the same class from being affected. Instead of just:


.selected{
background: #303030;
}

which applies the background to all elements with this class, try giving your anchor an ID to limit the effect to just that element:


#myanchor.selected{
background: #303030;
}

Or you can take advantage of attribute selectors to apply the effect to all links with a certain attribute:


a[data-flexmenu].selected{
background: yellow;
}