Whenever I stop hovering over my element, it reverts back to its original position. However, I want it to remain in place when I am navigating through the "sousmenu" menu and only return to its original position when I am not hovering over the "sousmenu". I am not very familiar with creating custom jQuery scripts, so I'm a bit confused in this situation. Thank you for your assistance!
.line-menu{
z-index: 10;
display: list-item;
background-color: #b6a083;
height: 1px;
width: 30px;
font-size: 1px;
padding: 1px;
color: white;
margin-right: 5px;
margin-left: 15px;
margin-top: 10px;
opacity: .7;
}
.class-menu{
position: relative;
z-index: 10;
display: block;
margin-top: 50px;
margin-left: 30px;
}
.class-menu:hover > .elem-one{
animation: lag-down 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes lag-down {
0% {
transform: rotate(0);
}
100% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translateY(13px);
}
}
.class-menu:hover > .elem-three{
animation: lag-up 0.2s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode: forwards;
}
@keyframes lag-up {
0% {
transform: rotate(0);
}
100% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translateY(-13px);
}
}
#menu{
/*height: 21px;*/
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
}
#menu li a:hover {background-color: none;}
#menu li a:active {background-color: #FFF;}
#menu .sousMenu{
position: absolute;
top: 0px;
z-index: 1;
display: none;
list-style-type: none;
margin: 1px;
line-height: 1.8;
font-size: 1.5em;
font-family: DidotBoldItalic;
background-color: rgba(255,255,255,0.9);
/*opacity: 0.5;*/
width: 290px;
height: 690px;
padding-left: 50px;
padding-top: 110px;
border: 0;
}
#menu .sousMenu li{
float: none;
margin: 0;
padding: 0;
border: 0;
}
#menu .sousMenu li a:link, #menu .sousMenu li a:visited{
display: block;
color: black;
font-family: 'Futura_light';
margin: 0;
border: 0;
text-decoration: none;
}
#menu .sousMenu li a:hover{
background-image: none;
color: #b6a083;
}
#menu li:hover > .sousMenu {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section id="menu">
<li><a href="#" class="class-menu"><div class="line-menu elem-one"></div><div class="line-menu elem-two"></div><div class="line-menu elem-three"></div></a>
<ul class="sousMenu">
<li><a href="idea.html">IDEA</a></li>
<li><a href="legend.html">LEGEND</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">WORK WITH US</a></li>
<li><a href="#">PRESS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#"><img src="elem/Btn-langue.png" alt="bouton-langue" class="menu-button bouton-langue" /></a></li>
<li><a href="#"><img src="elem/shopping-bag.png" alt="bouton-langue" class="menu-button bouton-langue" /></a></li>
<li><a href="#"><img src="elem/connexion.png" alt="bouton-langue" class="menu-button connexion" /></a></li>
<li><a href="#"><img src="elem/fb-insta.png" alt="bouton-langue" class="menu-button fb-insta" /></a></li>
</ul>
</li>
</section>