Navigation won't vertically align

Question

I have been trying to vertically align on my navigation menu. I tried display:table-cell; vertical-align: middle;, but it just won't. I do not want to apply padding-top or margin top. How do I manage to do this?

My fiddle https://jsfiddle.net/Tokyo/27kquzm3/

Answer 1

You have to give display:table to the ul and remove float:left; and then give display:table-cell;vertical-align:middle; to the li element.

#cssmenu > ul > li {
  display: table-cell;
 vertical-align: middle;
}

#cssmenu ul
{
    display: table;
    height: 100%;
}

Jsfiddle

Answer 2

#cssmenu{
width:100%;
padding-top:13px;
}

Try it out.