Home/ Questions/Q 8811275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T03:19:23+00:00

I have a problem I’ve yet to discover a solution for. I have a

  • 0

I have a problem I’ve yet to discover a solution for.
I have a very simple menu: jsfiddle

As you can see, the first item is centered in the middle due to padding-top, now this is fine but the rest of the items have 2 lines, so the padding pushes them down.

Is there a way to define that “If the item has 2 lines, then remove padding-top”?

HTML:

<div class="menu">
<ul class="foldoutmenu">
<li class="current menuitem1 firstitem "><a href="/angsthaantering.aspx"><span class="foldoutmenu_title">Angsthåntering</span></a></li>
<li class="menuitem2 "><a href="/haandter-din-depression.aspx"><span class="foldoutmenu_title">Håndter din depression</span></a></li>
<li class="menuitem3 "><a href="/laer-at-leve-med-adhd-som-voksen.aspx"><span class="foldoutmenu_title">Lær at leve med ADHD som voksen</span></a></li>
<li class="menuitem4 "><a href="/styr-din-spiseforstyrrelse.aspx"><span class="foldoutmenu_title">Styr din spiseforstyrrelse</span></a></li>
<li class="menuitem5 lastitem "><a href="/personlig-udvikling-via-musik-og-kunst.aspx"><span class="foldoutmenu_title">Personlig udvikling via musik og kunst</span></a></li>

​

CSS:

.menu, .menu ul { float: left; width: 100%; background: #464646; height: 41px; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.menu ul { margin: 0; padding: 0; }
.menu a { color: #e4e4e4; text-decoration: none; font-weight: bold; font-size: 18px; }
.menu li { float: left; margin: 0px; padding:10px 10px 0 10px; width:170px; height:32px; border-right: 1px solid #000; list-style-type: none; }
.menu li ul { position: absolute; left: -999em; top:42px; left:0; }
.menu li:hover ul { left: 0; }

.menu ul li.current a { text-decoration:none; }
.menu ul li.current { background:#c1001f; }

I/ hope my question was clear enough.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could make the items display: table-cell; and the parent table-row. Then set the vertical-align: middle; property:

    http://jsfiddle.net/qsESh/1/

    If you don’t want to items to spread across the whole width of the page, make the <ul> element smaller.

    Edit: You can also set a min-width or width to the <li> elements to make them bigger. Though like this the menu may be wider than the page itself: http://jsfiddle.net/qsESh/2/

    • 0