Question

The question isn’t very clear, because I don’t know how to ask it properly.

Have a look at this JSFiddle.

When you hover over About us, a dropdown menu is shown with a little green pointer. When your mouse goes over that pointer, the menu collapses.

I would like to know, is it possible to prevent that pointer from collapsing the menu.

I’ve tried putting the div with the pointer in the <li> tag, but then the jQuery gets tricky.

Is there anything else I can try that might work?

Answer 1

I would solve it using borders for the pointer, and place it with a psuedo-class of the hovered element.

This will work in IE7 and above.

.menu > ul > li:hover > a:before {
    content: '';
    display:block;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    bottom: -7px;
    left: 10px;
    margin-left: -5px;
    border-top-color: #445921;
    border-width: 7px 7px 0px 7px;
    z-index:9;
}

fiddle:
http://jsfiddle.net/mx877/