Grow your CSS skills. Land your dream job.

Trying to Code Mega Drop Down Menu

  • # June 12, 2013 at 7:11 am

    But it seems not to be working. I think am missing out something.
    When you hover on ‘Services’, the mega drop down menu of yellow bg will show, but if you want to use your cursor to inspect the contents of the div with yellow bg, the menu disappears.
    Here is the [fullscreen.](http://codepen.io/codegraphics/full/bavHD “”)
    Here is the [code.](http://codepen.io/codegraphics/pen/bavHD “”)

    Can someone fork t for me?

    # June 12, 2013 at 7:27 am

    The issue you’ve got is that it needs to be joined properly, so when you cease hovering the initial element and slide over the dropdown there is no gap inbetween.

    Is there a reason you’re not using UL’s and LI’s?

    # June 12, 2013 at 7:28 am

    Fixed: http://codepen.io/seraphzz/pen/jgKBz

    # June 12, 2013 at 8:05 am

    Check [here.](http://codepen.io/codegraphics/pen/xIiCh “”)
    I want a situation where the hover effect will remain the same in all the links.
    The link with red bg is fine.
    But others are overflowing to the right.
    How will i fix them?

    I want the whole mega drop down to align perfectly like the drop down of of the link with red bg.
    Something like [this.](http://www.indianic.com/ “”)

    # June 12, 2013 at 8:22 am

    The Codepen has badly formed HTML…is there a reason you are closing the `

  • ` before the ``?
# June 12, 2013 at 8:28 am

The normal way is for anchor to be a child of list.

You cant have something like this:

It’s not proper.

# June 12, 2013 at 8:32 am

You have this

  • web
  • which should be this

  • web
  • # June 12, 2013 at 8:36 am

    Perhaps you could play with this.

    http://codepen.io/Paulie-D/pen/488842da8d7807b7b924d0b5637589d3

    Basically the top level `

      ` is positioned relative (**not the `
    • `**)a nd the sub level `ul>` are positioned absolutely to that.
    # June 12, 2013 at 8:44 am

    Solved: [check](http://codepen.io/codegraphics/full/xIiCh “”)

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

    You must be logged in to reply to this topic.

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