css .main-navigation ul ul li wordpress category coloring

0 Views

Hi all I would like to change the color of my mega menu items on hover
I am sure that this line changing the above mentioned color 

.main-navigation ul ul li:hover>a {color:#5c99ce}

this line changing the mega menu items on hover on every item , but I would like to change just on specific categories example on category 3. I tried different codes but unfortunately they not work

Read More

I tired the following solutions without success: 

.main-navigation .li.vce-cat-3 .ul ul li:hover>a {color:#5c99ce}
.main-navigation .vce-cat-3 .ul ul li:hover>a {color:#5c99ce}
.main-navigation .cat-3 .ul ul li:hover>a {color:#5c99ce}
.main-navigation ul ul li.vce-cat-3:hover>a {color:#5c99ce}
.main-navigation ul ul li .vce-cat-3:hover>a {color:#5c99ce}
.main-navigation ul ul li vce-cat-3:hover>a {color:#5c99ce}
.main-navigation ul ul li.cat-3:hover>a {color:#5c99ce}

please help me to solve this problem

I added this additional code that was requested from me 

<li id="menu-item-945" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-945 vce-mega-cat vce-cat-3"><a href="http://localhost/jasco/?cat=3" data-mega_cat_id="3">Lessons</a><ul class="vce-mega-menu-wrapper">                                    <li>    

        <a class="mega-menu-img" href="http://localhost/jasco/?p=941" title="Electric Guitar Lesson – G Major Scale Technique">
            <img width="375" height="195" src="http://localhost/jasco/wp-content/uploads/2015/03/Electric-Guitar-Lesson-G-Major-Scale-Technique-375x195.jpg" class="attachment-vce-lay-b wp-post-image" alt="Electric Guitar Lesson - G Major Scale Technique">                         <span class="vce-format-icon">
                <i class="fa fa-play"></i>
                </span>
                    </a>


    <a class="mega-menu-link" href="http://localhost/jasco/?p=941" title="Electric Guitar Lesson – G Major Scale Technique" style="height: 66px;">Electric Guitar Lesson – G Major Scale Technique</a>

</li>                       
</ul></li>
Post Views: 0

Related posts

Leave a Reply

1 comment

  1. Have you tried something like:

    .main-navigation .li.vce-cat-3 .ul ul li:hover>a {color:#5c99ce !important;}

    It should do the trick

    EDIT

    please try this, then:

    .vce-cat-3 li:hover a {color:red!important}

    note: I’ve set the red color for clarity and I know it is inefficient and a little brutal but it is an attempt to identify the issue without a complete fiddle 🙂