Forums

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

Home Forums CSS [Solved] Trouble with CSS Dropdown Menu

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #166680
    BananaMan
    Participant

    Hey guys,

    I have recently been working on a small CSS menu that I can’t get working properly. Ive been fiddling around with existing menu’s and trying to get the positioning and fonts etc to be working.

    Basically first I had my main menu, which is working fine the way it should. Now when I try add a dropdown to one of the options, it really messes up and I am completely clueless to fixing this mess :S

    What I need help in: Positioning the dropdown menu’s below the correct menu-item (now they always float on the left). Also I want the submenu items, to be the exact same style/size/font/etc as the main menu items, which for some reason I can’t get working either.

    Any help is appreciated, I submitted the CSS / HTML Code of the menu into a pastebin file:

    CSS: http://pastebin.com/rJEgvnK1
    HTML: http://pastebin.com/e52RuH4r

    Thanks ahead,
    Rob

    #166688
    Paulie_D
    Member

    Perhaps rather than giving us two links to look at you could make a reduced case in Codepen.io

    See the”Tips” box on the right of this page.

    #166689
    BananaMan
    Participant

    Hereby the CodePen file:

    http://codepen.io/anon/pen/Huawp/

    #166691
    Paulie_D
    Member

    Ok…to start with the <center> element has been deprecated from HTML and should no longer be used.

    You should also get used to using the direct child selector > to target ONLY the elements that are direct children of a parent.

    So #mainmenu > ul > li will ONLY select the li that are direct children of a ul that is, itself, a direct child of #mainmenu.

    I would also make a habit of giving your various ul ‘levels’ classes as it makes selecting them easier.

    Here’s one I keep around which might help.

    http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

    #166948
    BananaMan
    Participant

    Oh that trick with the > is very usefull, thanks that helped me a lot :)!

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