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

Question

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 !

Sorry ^^ I've just updated the html & css I'm using in the jsbin link. — sonlexqt
– sonlexqt, Commented Jul 30, 2013 at 13:05
Check on script-tutorials.com/pure-css3-lavalamp-menu, like raddevon said it looks like your lavalamp div isn't where it should be. — Joe_G
– Joe_G, Commented Jul 30, 2013 at 13:16

raddevon · Accepted Answer · 2013-07-30 13:12:36Z

1

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.

answered Jul 30, 2013 at 13:12

raddevon

3,3604 gold badges46 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related