CSS: Have hover over color remain when submenu is clicked on

The right way to do this would be to use a JavaScript JQuery.

Following steps would be required.

1. Use the unique Ids assigned to the Menu Items such as menu-item-53 in following piece of code from your website to build the constant hover.

<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-53"><a href="http://sendright.com/draft/dial/about/">About</a>

Select allOpen in new window

2. Add a little bit of JS in a file and include same in all pages:

    function changeTabs()
    {
      var currentURL;  //The current site URL
      currentURL = location.href;       
      
      currentArray = currentURL.split('/'); //http://sendright.com/draft/dial/about/
        if(currentArray.length > 5)
        {
            currentURL = currentArray[5]; // 5th item in the array would be about
        } else
        {
            return;
        }
        
        //alert(currentURL.toLowerCase());
        switch(currentURL.toLowerCase())
        {
			//About Page
			case "about":
			   $j("ul").find("li#menu-item-56").addClass("activeTab");
			  break;
		}
	}

Select allOpen in new window

Where you ActiveTab CSS class could have following definition

li.activeTab
{
      background: #819AA9;      
       color: #FFFFFF;
}

Select allOpen in new window

This should address your need.

Regards,

I added your script and css but I don't see a difference, please let me know if I did something incorrectly.

Thanks!

Oops missed out on some part

change above code to  include these lines on top

var $j = jQuery.noConflict();


$j(document).ready(function(){

    changeTabs();

// Insert the above given function here

}

I don't work with jQuery that much so if you don't mind checking the syntax:

<script type="text/javascript">
 /*<![CDATA[ */

var $j = jQuery.noConflict();


$j(document).ready(function(){

    changeTabs();

    function changeTabs()
    {
      var currentURL;  //The current site URL
      currentURL = location.href;      
     
      currentArray = currentURL.split('/'); //http://sendright.com/draft/dial/about/
        if(currentArray.length > 5)
        {
            currentURL = currentArray[5]; // 5th item in the array would be about
        } else
        {
            return;
        }
       
        //alert(currentURL.toLowerCase());
        switch(currentURL.toLowerCase())
        {
                  //About Page
                  case "about":
                     $j("ul").find("li#menu-item-56").addClass("activeTab");
                    break;
            }
      }
</script>

Thanks!

yeah thats fine :)

also lets enable

alert(currentURL.toLowerCase()); by removing //

this will give us messagebox window.

Regards,

I really appreciate all of the help.  Hover over is still not showing up when submenu links are clicked though.

Let me check!

Hi,

I have checked your page and apparently some dependent javascripts were missing.

Please include the following tags before the function.

    <script src="/Scripts/jqueryui182custommin.js" type="text/javascript"></script>
    <script src="/Scripts/jqueryeasing13.js" type="text/javascript"></script>
    <script src="/Scripts/jquerygalleryview11.js" type="text/javascript"></script>
    <script src="/Scripts/jquerytimers112.js" type="text/javascript"></script>
    <script src="/Scripts/jqueryhoverIntentminified.js" type="text/javascript"></script>

I have attached all the required scripts here. jqueryscripts.zip

Let me know once you are done.

Regards,

it took a second for me to add that since I am using the genesis framework in Wordpress, but I think I have it added correctly.  Let me know if I did not add it correctly as it is still not working :(

thanks for sticking with me here.  It's fairly late where I am so I will be checking this in the morning.

Thanks!

The scripts have been added at the end after the declaration of the above given function.

Probably you should move the above function to a new file and include it after the other javascript files...

Also the closing } is missing the j(document).ready(function(){ code, please add the same.

Thanks!

You can do this very easily by updating your css.

Change the following:

#nav li a:hover {
      //background: url(images/navhov.png) top right;
      background: #819AA9;
      color: #FFFFFF;
}

to

#nav li:hover, li a:hover {
      //background: url(images/navhov.png) top right;
      background: #819AA9;
      color: #FFFFFF;
}

After reading your question again, I'm not sure my answer was what you are looking for.  My answer was for how you can keep the hover active on the main nav when hovering the sub nav.

Are you looking to highlight the current page item in the menu?  For example, if you are on the Family page, did you want the Family link in the menu to be highlighted?  Or, are you looking to highlight Issues when on the Family page?

Try the following declarations.  The first declaration will keep the main nav item highlighted, Issues,  when you are on a sub page.  The second will keep the current page item, Family,  highlighted when on that page.

#nav ul li.current_page_parent>a {
    background: #819AA9;
}
#nav ul li.current_page_item a {
    background: #B4C9D5;
}

Here is a screenshot with all of the above css added, including my first answer, to show you what it would look like.  I am currently on the Family page and am hovering over Education.

 

I already answered this question, but because author ignored my solution he asks it again.
See here: https://www.experts-exchange.com/questions/27393686/keep-hover-over-image-on-current-menu-item.html

Thank you all very much for your help.  pritamdutt's solution worked perfectly.  SSupreme, I apologize once again for breaking protocol, The question I posted here was slightly different, however.  I needed the hover over to remain when a sub-menu link was chosen and it wasn't working with the solution from that question (although the main nav hover over did work perfectly).  Again, I apologize.

worked perfectly, thank you for your patience.

Great!

Thanks!