HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation_desktop">
<div class="button_desktop_01">1.0 Main Menu
<div class="SlideItem_01">
<div>1.1 Sub Menu</div>
<div class="button_desktop_02">1.2 Sub Menu
<div class="SlideItem_02">
<div>
<div>1.2.1 Sub Menu</div>
<div>1.2.2 Sub Menu</div>
</div>
</div>
</div>
</div>
</div>
<div class="button_desktop_01">2.0 Main Menu
<div class="SlideItem_01">
<div class="button_desktop_02">2.1 Sub Menu
<div class="SlideItem_02">
<div>
<div>2.1.1 Sub Menu</div>
<div>2.1.2 Sub Menu</div>
<div>2.1.3 Sub Menu</div>
</div>
</div>
</div>
<div>2.2 Sub Menu</div>
</div>
</div>
</div>
CSS:
.button_desktop_01{
float: left;
width: 20%;
cursor: pointer;
background: #5882FA;
}
.button_desktop_02 {
position: relative;
cursor: pointer;
}
.SlideItem_01, .SlideItem_02 {
display: none;
}
.SlideItem_02 {
position: absolute;
top: 0;
left: 100%;
width: 100%;
background: #5882FA;
background-color:#FFD700;
}
.button_desktop_01:hover, .button_desktop_02:hover,
.button_desktop_01:active, .button_desktop_02:active,
.button_desktop_01:link, .button_desktop_02:link,
.button_desktop_01:visited, .button_desktop_02:visited {
background: #CCCCCC;
text-shadow: none;
}
jQuery:
$(document).ready(function() {
$(".button_desktop_01, .button_desktop_02").mouseenter(function() {
$(this).children(".SlideItem_01, .SlideItem_02").slideDown(500);
});
$(".button_desktop_01, .button_desktop_02").mouseleave(function() {
$(this).children(".SlideItem_01, .SlideItem_02").slideUp(500);
});
});
The code above slideUp/Down some menus. All this works good so far.
However, now I want that each Sub Menu changes its colour once the user is hover it. I tried different ways but I could not make it work.
For example the code above changes the colour of the entire menu and not just from the specific menu where the cursor is on. Besides, it does not cover anything that is part of SlideItem_02.
What do I have to change in my CSS to make the hover effect work?
You can also find the code here: https://jsfiddle.net/by3d0kt9/6/