Grow your CSS skills. Land your dream job.

Almost a drop-down…

  • # July 7, 2013 at 1:03 pm

    Hi,

    I am trying to code up a design which was provided to me by an art director I am working with. She wants a menu where the items with submenus trigger a dropdown which appears shifted up. I tried adjusting a basic css dropdown just setting a negative top margin on the menu item, which works until you move your cursor off of it, which makes the whole submenu move back down again. The ‘pop up’ submenu would have to stay in the mouseover position until the cursor is moved from it, and needs to have a different background color for rollovers.

    [Here is a link to a screenshot of what I am trying to accomplish](http://everbeta.com/dropdown.jpg)

    Any assistance would be GREATLY appreciated!

    TIA,
    Colin

    # July 7, 2013 at 1:09 pm

    Could you put what you have so far in Codepen for us to tinker with?

    # July 7, 2013 at 1:22 pm

    Sure : [Here it is.](http://codepen.io/anon/pen/dciaF “”)

    # July 7, 2013 at 2:42 pm

    Little bit like this?

    http://codepen.io/Paulie-D/pen/0d7af43503fb28642ff8eab9d68d54e3

    # July 7, 2013 at 6:20 pm

    Awesome! U da man Paulie!

    # July 7, 2013 at 6:40 pm

    Just noticed, the items without sub-menus (‘home’ and ‘contact us’) are also pushed up on rollover – is there any way to prevent this from happening ?

    # July 8, 2013 at 4:46 am

    Sure, if a menu item has children, give it a class of something like erm…`.has-children` and put the hover state on that.

    Like this: http://codepen.io/Paulie-D/pen/c86abdb124713c59e0f165990b75caba

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".