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
  • #166680

    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:


    Thanks ahead,


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

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


    Hereby the CodePen file:


    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.


    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.