Tabbed navigation with CSS transitions

[plaedien]

Hello again CSS peeps,

I’m developing a new website for work, and I have wanted to use CSS transitions on the navigation.

[Your text to link here…](http://www.petsdomain.com.au/natures_test/Natures-NAV-TEST_transitions.html “”)

Ideally I want it so that the coloured blocks are divs coloured with css, and the text be real text.

I couldnt seem to get the blocks to slide down over the text, the rollover wouldn’t trigger at all.

Here is an example using a sprite of what I’m trying to achieve (ignore the fact that the text obviously scrolls down due to the sprite.)

[Your text to link here…](http://www.petsdomain.com.au/natures_test/NB-Test_nav.html “Nature’s Best – Test nav”)

What I want to do is have the coloured block slide down and COVER the text below it.

Any ideas?

[CarlRosell]

Use the adjacent sibling selector to toggle the other div. `#div1:hover + #div2 {
//what should happen when hover.
}`
the div1 is the text. this doesnt have to be a div. and then after the + the div you want to effect.

http://jsfiddle.net/6BfR6/307/

[Author]

Posts