Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Big ‘Ol CSS Dropdown Menu

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #28295

    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!

    #72077
    noahgelman
    Participant

    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

    Code:
    • item 1
    • item 2
    • item 3
      content
    Code:
    div.content3 { display:none;}

    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.

    #69807

    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?

    #69812
    noahgelman
    Participant

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.