CODEWITHSUNDEEP
cssdrop-down-menuhovertransition
sonlexqt
sonlexqt

Reputation: 6469

CSS - perform transition when hover over li element (dropdown menu)

I'm making a homepage like this: http://jsbin.com/umaguc/1/ and I'm currently working on the dropdown menu. Now what I want is to make an effect like: http://www.script-tutorials.com/demos/249/index.html; I have a div id="lavalamp" which has width, height and background color (looks like a rectangle); when I hover one of #nav ul li element (like Home, Game Offline, Game Online, Esport, Music ...) i want this #lavalamp div to be moved and changed its width so that it will looks like the effect I mentioned above. This is the idea for my code:

#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 39px;
}

#nav li:nth-of-type(2):hover ~ #lavalamp {
    left:110px;
    width:110px;
}

but sadly it's just not work. When I hover over an #nav ul li element, nothing changes ! Hope you guys can have me with this problem .. Thanks a lot !

Upvotes: 2

Views: 486

Answers (1)

raddevon
raddevon

Reputation: 3340

It looks like you've used a general sibling selector to select #lavalamp, but that element never appears as a sibling of your li element.

Unfortunately, I don't believe CSS has a way for you to climb back up the DOM to get to your #lavalamp from the lis. You could use jQuery, or you could think about ways to restructure your markup that would make the element accessible through pure CSS.

Upvotes: 1

Related Questions