CODEWITHSUNDEEP
jquerycss
deha
deha

Reputation: 815

jQuery losing hover with position: relative

I designed an dropdown sliding menu using jQuery. When on one page I added 

position: relative  
top: -18px

for some div elements, they are on the top of the ul that was slided down. While moving mouse through the menu, when I intersect with those elements, jquery starts to sliding up the menu (seems that while moving through the ul I'm jumping to div that is on the top, so that's correct). Of course I don't want such effect. I tried with adding z-index, but with no luck.

http://jsfiddle.net/2WHVT/ (I added black border to the date tag, which is destroying the menu). Sorry for the color and design, I moved it quickly, but the point is the same.

Maybe you have some idea?

Upvotes: 0

Views: 2131

Answers (3)

Nachshon Schwartz
Nachshon Schwartz

Reputation: 15765

I've added a z-index to the #menu ul CSS and it seemed to do the trick. Like so:

#menu ul
{
    padding: 0;
    margin: 0;
    z-index: 2;  //THIS IS WHAT I ADDED 
}

See here: http://jsfiddle.net/nayish/2WHVT/10/

Upvotes: 0

BentOnCoding
BentOnCoding

Reputation: 28148

#NewsDisplay .news .newsDate
{
    position: relative;
    top: -18px;
    display: inline-block;
    border: 1px solid black;
    height: 18px;
    width: 100%;
    text-align: right;
    color: Gray;
    z-index:-10;
}

This worked for me. Let me know if you have a problem.

Upvotes: 0

tw16
tw16

Reputation: 29575

You need to add a z-index to bring your li's to the top. Live example: http://jsfiddle.net/tw16/2WHVT/12/

#menu ul li {
    border-right: 1px solid #820B0B;
    display: block;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1; /*add this*/
}

Upvotes: 4

Related Questions