Hover Css Styling That Persists After Mouse Away

I have a HTML ul banner that has two li sub-bars that are exposed on hover. However, if you mouse away from it or over another main entry, the hover is lost. I was wondering if the

Solution 1:

You can add different transitions on hover and on normal. Make sure you hide your menu with an animatable property! Display won't work and also be careful trying to go from for example, height: 0px; to height: auto;.

Here is one way to do it.

I've forked your fiddle. First I've removed the :hover states and then I added:

.nav.select_sub{
  display: block;
}
.nav.select:hover.select_sub, 
.nav.select:hover.sublia{
  margin-top: 0%;
  transition: all 0.2s;
}
.nav.select.select_sub, 
.nav.select.sublia{
  margin-top: -100%;
  transition: all 2s3s;
}

You can see I've hidden your menu with a large top margin. When you hover over .select the margin becomes zero in 0.2s, that should be fast enough for a good user experience.

When you stop hovering the submenu remains for three seconds and then goes back up ten times slower.

Solution 2:

Something like this.. but hey I tried.

HTML:

<divclass="menu"><p>Hover</p><ulclass="menu-content"><li><ul><li>Menu 1</li><li>Menu 1</li><li>Menu 1</li><li>Menu 1</li></ul></li><li><ul><li>Menu 2</li><li>Menu 2</li><li>Menu 2</li><li>Menu 2</li></ul></li></ul></div>

CSS:

.menu {
    width: 98%;
    text-align: center;
    padding: 20px1%;
    background-color: #eee;
    overflow:  hidden;
}

.menup {
    margin: 20px0;
    color: #096847;
    font-size: 1.3em;
}

.menu:hover.menu-content {
    margin-top: 0;
}

.menu-content {
    margin-top: -100%;
    overflow: hidden;
    transition: all 1s ease-in;
}

.menu-contentli {
    list-style-type: none;
}

.menu-content > li > ul > li {
    width: 25%;
    float: left;
    padding: 20px0;
    background-color: #2aa87c;
    outline: 1px solid #ddd;
    cursor: pointer;
    color: #fff;
}

RESULT:

EXAMPLE

Solution 3:

In pure CSS3 you can use a transition delay: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay animating the opacity of the dropdown. If you can't use CSS3 you have to go with JS (not necessarily jquery)