Forums

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

Home Forums CSS Trying to Code Mega Drop Down Menu

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #45468
    CodeGraphics
    Participant

    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?

    #138430
    Andy Howells
    Participant

    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?

    #138431
    Andy Howells
    Participant
    #138433
    CodeGraphics
    Participant

    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/ “”)

    #138435
    Paulie_D
    Member

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

  • ` before the ``?
#138436
CodeGraphics
Participant

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

You cant have something like this:

It’s not proper.

#138437
Paulie_D
Member

You have this

  • web
  • which should be this

  • web
  • #138439
    Paulie_D
    Member

    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.
    #138440
    CodeGraphics
    Participant
    Viewing 9 posts - 1 through 9 (of 9 total)
    • The forum ‘CSS’ is closed to new topics and replies.