Załamanie tekstu w ul menu

Witam, mam problem z zawijaniem linii w przyciskach menu. Gdy wpisze za dużo słów, wskakują one do innej lini - ok ale jest ona bardzo oddalona od górnej co powoduje najście tekstu na kolejny przycisk. Jak mogę "zmniejszyć" odległość tej lini?

KOD HTML:

		<ul class="menu">
		  <li><a href="/home" class="active"><span>Tynki gipsowe maszynowe</span></a></li>
		  <li><a href="/services"><span>Na ogrzewanie ścienne</span></a></li>
		  <li><a href="/about"><span>Cementowo-wapienne</span></a></li>
		  <li><a href="/contact"><span>Wylewki betonowe</span></a></li>
		</ul>

CSS:

.menu{margin:0; padding:0; width:250px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:80px; display:block; }
.menu li a{text-align:left;height:80px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('../img/verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url('../img/verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('../img/verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:80px;}

Screen:

.menu li a span{line-height:80px;}

musisz zmienić, bo to Ci powoduje problem. Co prawda line-height Ci ładnie wyrównuje na środek, ale musisz to jakoś obejść inaczej. Albo np dasz tu line-height na 80 i elementy nadrzędne na auto albo coś innego.

Atrybut line-height określa wielkość(wysokość) wiersza.

Przykładowe rozwiązanie:

.menu li a span{
    top: 31px;
    position: relative;
    text-align: center;
    display: block;
    width: 100%;
}
.menu li a .dbLine{
    top: 24px;
}

Dodatkowa klasa dbLine dla przycisków z tekstem, który nie mieści się w jednej linii.