Organizational Research By

Surprising Reserch Topic

Question:jQuery ul li hover effect


I have this code here and I am trying to show the nested .submenu lists on ul#menu li hover events. If you can see the ul.submenu's are inside the li's but for some reason when you drag your mouse from the actual ul#menu li a to its nested ul.submenu it disappears, as if you are moving out of it. I do not understand why that happens.

I have tried changing a bit the DOM as well as using setTimeout but with no luck.

Any ideas of how to get this done? And more importantly... why my problem occurs? I mean, since the ul.submenu is inside the li shouldn't it be considered the same hover area?

asked Sep 13, 2013 in jquery by anonymous
edited Sep 12, 2013
0 votes
47 views



Related Hot Questions

2 Answers

0 votes
HTML



CSS

#menu ul {
    width: 160px;
    padding: 4px;
    margin: 0;
    border: 2px solid #94AA13;
    background-color: #fff;
    border-radius: 4px;
}

#menu li {
    position: relative;
    padding: 0;
    margin: 0;
}

#menu li + li {
    margin-top: 4px;
}

#menu a {
    display: block;
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    color: #f2f2f2;
    background-color: #283720;
    border-radius: 4px;
}

#menu li > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin: -4px 0 0 10px;
}

#menu li:hover > ul {
    display: block;
}

#menu li:hover > ul:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
}

JS... NONE!

The trick is in the :before element: http://caniuse.com/#search=before

If you can't use it, try adding a dummy div.
answered Sep 13, 2013 by anonymous
edited Sep 12, 2013
0 votes
HTML



CSS

#menu ul {
    width: 160px;
    padding: 4px;
    margin: 0;
    border: 2px solid #94AA13;
    background-color: #fff;
    border-radius: 4px;
}

#menu li {
    position: relative;
    padding: 0;
    margin: 0;
}

#menu li + li {
    margin-top: 4px;
}

#menu a {
    display: block;
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    color: #f2f2f2;
    background-color: #283720;
    border-radius: 4px;
}

#menu li > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin: -4px 0 0 10px;
}

#menu li:hover > ul {
    display: block;
}

#menu li:hover > ul:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
}

JS... NONE!

The trick is in the :before element: http://caniuse.com/#search=before

If you can't use it, try adding a dummy div.
answered Sep 13, 2013 by anonymous
edited Sep 12, 2013

...