We Keep Coding

Add hover class to 2nd level menu links

I have a vertical mega menu. When you hover over a link that has children it shows another vertical menu to the right and so on. When you hover away from those associated submenus, they are hidden and the menu is reset.
I'm adding a class to the parent link so that the hover state stays active, this works fine. However, my issue is with the 2nd level links that have a sub menu. I'm trying to do exactly the same but with these links but whatever I try doesn't appear to work.
This is what I want to achieve, notice how the 2nd Level Page link has a pink background when the 3rd level menu is open:
This is the JS I'm using and accompanying JSFiddle to show you the stage I'm at currently: http://jsfiddle.net/mz9abf43/2/
$( ".menu li.menu-item-has-children a, .menu li.menu-item-has-children > .drop" ).mouseover(function() {
$('.menu li.menu-item-has-children a').addClass('go');
$('.menu li.menu-item-has-children > .drop a').removeClass('go');
});
$( ".menu li.menu-item-has-children > .drop a" ).mouseover(function() {
$('.menu li.menu-item-has-children > .drop a').addClass('go');
});
$( ".menu li.menu-item-has-children > *" ).mouseout(function() {
$('.menu li.menu-item-has-children a').removeClass('go');
});
UPDATE
I am not committed to the JS solution I've been tinkering with so have no issues with a CSS solution. I just want a solution that makes it work.

The basic solution, which you can complement with any other style you need
/* Hide all child lists */
li > ul {
display: none;
}
/* Hovering list item will cause the child menu to be displayed */
li:hover > ul {
display: block;
}
/* Default style for the menu item */
li {
color: black;
}
/* Hover style for each menu item, add more if you have more levels */
ul > li:hover,
ul > li > ul > li:hover,
ul > li > ul > li > ul > li:hover {
color: red;
}
<ul>
<li>
Item 1
<ul>
<li>
Item 1 a
</li>
<li>
Item 1 b
<ul>
<li>
Item 1 b I
</li>
<li>
Item 1 b II
</li>
<li>
Item 1 b III
</li>
</ul>
</li>
<li>
Item 1 c
</li>
</ul>
</li>
<li>
Item 1
</li>
<li>
Item 1
</li>
</ul>

Simple solution is in css shown below,
What I have done:
Remove all the JS code you have added for this hovering functionality.
Add the class highlight to all the elements which needs to be highlighted(background-color:pink) on hover.
CSS CODE:
.highlight:hover {
background: pink;
}
//comment below css styles
/*.menu li a:hover,
.menu li a.go { background: pink; }*/
Live Demo # JSFiddle

jquery animation in Chrome

I have a one div that have relative position and ul into this that have absolute position.
want when click in right button ul shift to right and show next li child.
I have this code , this work in FF but in Chrome this don't work correctly.
In chrome when i press the button UL it will jump to the right and don't animate, and no show li
$(_rightNavigator).click(function () {
$("#thumbviewer").stop().animate({
left: '+=' + $("#thumbviewer li").outerWidth(true) + 'px'
}, 1000);
});
.thumbviewer {position:absolute;padding:0 5px 0 0;margin:0;text-align:center;display:inline-block;}
.thumbviewer li{list-style:none;float:right;}
.thumbviewer li a {text-decoration:none;float:right;padding:4px 2px;margin:0;}
.thumbviewer li a img{border:2px solid #808080;border-radius:5px;}

I'm trying to select a nested ul, tried with css but having trouble

I have a cms rendering the menus for a website I am designing and I need to select the children of the parent menu items. Here is how the code is generated:
<div class="menu">
<ul>
<li></li>
<li><a href="" class="CurrentButton" ... />text</a>
<div>
<ul></ul>
</div>
</li>
</ul>
</div>
I have tried this CSS to try to select it but it's been unsuccessful as of yet aside from the display :none;
.menu ul li div {
display: none;
}
.menu > ul > li > a.CurrentButton div {
display: block;
}
can anyone see what I'm doing wrong? Would a jquery function be easier? I'm fairly new to jquery so I'm not sure how to go about writing a function for it.
I am trying to select the div within the li when the anchor within that li has the class CurrentButton, if the anchor within the li doesn't have the class then I want it hidden

Both of the examples you give rely on finding the .menu element, but none exists in your code. it does now.
a.CurrentButton div selects any divs inside of any a.CurrentButtons. However, your divs are not inside the as. Try this:
.menu ul > li > a {
//selects all the as, but non of the divs
}
.menu ul > li > * {
//selects anything inside a 'li', both 'a's and 'div's
}
To select divs that follow a.CurrentButtons, use this:
.menu ul li > a.CurrentButton + div {
//any 'div's that are directly after 'a.CurrentButton'
}

If you really need to be specific, use the adjacent elements operator ( + )
.menu > ul > li > a.CurrentButton + div {
Otherwise, you are targeting a div that is the descendent of CurrentButton and that doesn't exist.
If you don't need to be so specific, use the same selector as before:
.menu > ul > li > div {

Assuming the <ul> above is a child of an element with the class .menu, the <div> above is not a child of a.CurrentButton, so you should select it like this:
.menu > ul > li > div {
display: block;
}
Just so you know > only selects direct children of an element.

Try this:
In your HTML div is a sibling of a.CurrentButton. So, you should use + sign.
.menu ul li div {
display: none;
}
.menu > ul > li > a.CurrentButton + div {
display: block;
}

Change opacity of other tab when I hover current tab

I create a dropdown menu. I need when I hover to a tab, the opacity of other tabs in menu are change except the current tab I hover.
Example: when I hover to Home Tab, state of Home tab and list item is not changed (yellow color, opacity=1) but other tabs (Tutorial, Article, Inspiration) are changed (grey color, opacity=0.5)
<code>http://jsfiddle.net/dennisho/6fX42/2/</code>

There is no sibling selector that will select all siblings to help select the other menu elements but you can use the :not selector
nav > ul:hover li:not(:hover) {
opacity:0.5;
}
JSFiddle Demo

You could do something like this.
nav ul li {
background-color: yellow;
}
nav ul li:first-of-type {
border-top-left-radius:25px;
border-bottom-left-radius:25px;
}
nav ul li:last-of-type {
border-top-right-radius:25px;
border-bottom-right-radius:25px;
}
nav > ul li:hover{
opacity:1;
}
nav > ul li:not(:hover){
opacity:0.5;
}
But please include relevant code in your question so it is helpful for other people, too.

slide bottom border in from left on hover

i have this css for my menu:
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
margin-right:20px;
min-width:70px;
}
#menu > li {
display:inline-block;
list-style:none;
margin-left:auto;
margin-right:auto;
}
#menu > li:hover {
color:#000000;
}
#menu li a {
display:block;
padding-top:25px;
border-top:4px solid #FFFFFF;
color: #FFFFFF;
text-decoration:none;
text-align: center;
}
#menu li a:hover {
border-color:#000000;
color:#000000;
}
i want to be able to make a bottom border (like the top one but on the bottom) slide in from the side on link hover
here is a fiddle: http://jsfiddle.net/2w6NB/

Position your element you want coming from the left to be
left: -200px; //or however much it takes to hide the element completely or partially
Then here is some sample code that you might be able to successfully use to model your functionality:
$( "#item" ).hover(function() {
$( "#item" ).stop().animate({
left: "-1" //shows item
}, 400);}, function() {
$( "#item" ).stop().animate({
left: "-160" //this determines how far back the item goes after hovering
}, 400);
});
Let me know if you have questions or if it works.

I believe this link will help you: Sliding with CSS and Affect Other Element on Hover
The goal here is to slide a line/boarder from an "overflow:hidden;" div using either CSS webkit transition or a javascript function. You cannot have this happen on the same object as the menu links, but you can set it so that there is a div directly underneath it that will let the bar slide in.
(An example of this is setting "right:200px;position:absolute;width:200px;border-top:solid black 5px;" to the inside object and the div surrounding it to "overflow:hidden;width:200px;". Then you use the transition on a css hover event or a javascript function to move over the object back into the div so that it can display.
I hope that helps!