Search code examples
csshoversubmenudropdown

Align submenu down

So I'm making a minor button and navigation kit in terms of learning more HTML and CSS responsiveness. Navigation is my weak point and I've come to my first problem that I can't get my head around.

https://jsfiddle.net/ku0wezws/3

If you scroll to the bottom of the CSS, you'll find the subnav implementation and what I'm trying to achieve is to align all the content in the center when you hover over About. You'll notice that it has just aligned one after the other side by side. My aim is to center all of that normally, going all the way down. Like this: http://www.w3schools.com/howto/howto_js_dropdown.asp

Am I being really stupid? I think I am. What should I adjust in the CSS to make this happen?

Thank you.

Edit:

Edited the JSFiddle

Solution

  • Add this to prevent the li items of that submenu to float next to each other:

    .jkit-subnav li {
      float:none;
}

    https://jsfiddle.net/yhkuv138/