- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello,
I’m interested in building a CSS navigation menu that functions like this one: http://www.clinique.com/. When hovering over one of the links, a div pops down below. How would I go about recreating this? Would I need to use some jQuery?
Thanks in advance!
You don’t need to use jquery, although you certainly could. The site you referenced uses simple html and css. What they do is put a div inside the list item and displayed none. when they hover the list item, the div is switched to display block. Like so
li.item3:hover div.content3 { display:block;}
Then after that, it’s up to you to style the div and align it. Good luck. tell me how it goes.
Hey, so I’ve got it sort of working. Here it is: http://www.stuff.fiveeightfive.com/WMU_mockup. The content shows when hovered but it pushes the div below it down and it pushes the other list items over. Is there anyway that I can get the div to show up without affecting any of the elements around it?
Yes. You attach {position: relative;} to the list item and {position: absolute;} to the div. After that all that’s left is final positioning with margin to move it where you need it.