Как сохранить состояние зависания при падении брата?

Question

// HTML 
<nav _v-2e9e2f12=""> 
    <ul _v-2e9e2f12=""> 
    <li _v-2e9e2f12=""> 
     <a _v-2e9e2f12=""></a> 
    </li> 
    <ul tabindex="-1" _v-0078ee36="" _v-2e9e2f12="" class="menu" style="top: 30px; left: 35px"> 
     <li _v-0078ee36=""><a _v-0078ee36="">Split up</a></li> 
     <li _v-0078ee36=""><a _v-0078ee36="">Split down</a></li> 
    </ul> 
    </ul> 
</nav> 

// CSS 
nav > ul li[_v-2e9e2f12]:hover { 
    z-index: 9999; 
    -webkit-transform: translate(3px); 
    transform: translate(3px); 
} 

Теперь, я хочу сохранить это зависающее состояние, когда <ul tabindex="-1" _v-0078ee36=""> зависает.

Как это осуществить?

Вот JSFiddle: https://jsfiddle.net/u868Lazf/1/

(Примечание: Я также открыт для решения JQuery)

Answer 1

Не совершенным, но решение:

JQuery:

$('ul li[_v-0078ee36]:first-child').hover(function(){ 
    $(this).parent().parent().find('li[_v-2e9e2f12]').addClass('up'); 
},function(){ 
    $(this).parent().parent().find('li[_v-2e9e2f12]').removeClass('up'); 
}); 
$('ul li[_v-0078ee36]:last-child').hover(function(){ 
    $(this).parent().parent().find('li[_v-2e9e2f12]').addClass('down'); 
},function(){ 
    $(this).parent().parent().find('li[_v-2e9e2f12]').removeClass('down'); 
}); 

CSS:

nav > ul li[_v-2e9e2f12].up { 
    z-index: 9999; 
    -webkit-transform: translate(0,-3px); 
    transform: translate(0,-3px); 
} 

nav > ul li[_v-2e9e2f12].down { 
    z-index: 9999; 
    -webkit-transform: translate(0,3px); 
    transform: translate(0,3px); 
} 

Вы должны использовать менее запутывающие имена классов и некоторые более конкретные, чтобы вы могли найти тот, который вам нужен.