字体大小增加导致ul菜单未对齐

Question

As demonstrated here , I've built a fixed menu using unordered lists and a lot of css. I've also included a button with a custom class that redirects back to the frontpage and made it a litter bigger using font-size: 130%. By using line-height: 0; I was able to force all buttons to be the same height. Unfortunately, somehow an extra pixel of height is added to the menu and the big button sticks to the top, while the rest of the buttons stick to the bottom. Apart from seriously triggering OCD, it looks plain ugly when hovering, so I'd like to fix it. I am at a dead end and cannot solve this by myself, so I would like to ask anyone to help me out.

Thanks in advance!

li.menu-titel {
    font-size: 130%;
    font-weight: lighter;
    overflow:hidden;
    line-height: 0;
}

Answer 1

Simple format all your li with display:inline-block (instead of inline ),

or remove the vertical-align:top; .