Криво отображается раздвижное меню

[DaBags]

Народ помогите пожалуйста подредактировать раздвижное меню на сайте. Захожу через оперу - отображается всё норм. Захожу через гугл - первая строчка меню начинается с серведины. Вот сайт Для просмотра ссылки Войди или Зарегистрируйся. Если что двиг DLE, шаблон дефолтный.
Вот вам html код меню:

<div id="leftmenu" class="block">
<div class="dtop">&nbsp;</div>
<div class="dcont">
<div class="btl">
<h4>Навигация</h4>
</div>

<style type="text/css">
a.zagruzka-plus_menu-main,
a.zagruzka-plus_menu-main:visited
{
display:block;
padding:3px 5px 3px 5px;
background:#FAFAFA;
border-top:1px solid #fff;
border-bottom:1px solid #E8E8E8;
color:#696969;
font-weight:bold;
text-shadow:0px 1px 0px #fff;
}
a.zagruzka-plus_menu-main:hover,
a.zagruzka-plus_menu-main:active
{
color:#696969;
background:#F0F0F0;
}
.zagruzka-plus_menu-box
{
-moz-box-shadow:0px 0px 3px #aaaaaa inset;
-webkit-box-shadow:0px 0px 3px #aaaaaa inset;
box-shadow:0px 0px 3px #aaaaaa inset;
}
</style>
<a href="/" class="zagruzka-plus_menu-main" align="left"><img src="/favicon.ico" width="16"/> Ссылка </a>
<a href="/" class="zagruzka-plus_menu-main"><img src="{THEME}/images/icons/forum.png" /> Ссылка </a>
<a href="/" class="zagruzka-plus_menu-main"><img src="{THEME}/images/icons/news.png" /> Ссылка </a>
<a href="//" class="zagruzka-plus_menu-main"><img src="{THEME}/images/icons/game.png" /> Ссылка </a>
<a href="/" class="zagruzka-plus_menu-main"><img src="{THEME}/images/icons/addnews.png" /> Ссылка</a>

</div>
<div class="dbtm">&nbsp;</div>
</div>

Вот CSS код:

#leftmenu .dcont .dpad {
overflow: hidden;
}

.lmenu {
margin-top: -1px;
}

.lmenu li a {
color: #3f4b51;
display: block;
height: 27px;
line-height: 27px;
border-top: 1px solid #e5e9eb;
}

.lmenu li a:hover {
color: #398dd8;
background-position: 100% 50%;
}

.menu {
margin-bottom: 10px;
padding: 4px 0;
}

.menu ul {
margin: 0;
}

.menu li {
}

.menu li a {
background: url("../images/menulnk.png") no-repeat 0 -999px;
padding: 0 15px;
border: 0 none;
color: #3f4b51 !important;
}

.menu li a:hover {
background-position: 0 0;
background-color: #ffffff;
}

.block {
margin: 0 0 0 7px;
width: 275px;
}

.block .dtop, .block .dbtm, .blocklite .dbtm {
height: 19px;
background: #fff url("../images/block.png") no-repeat -550px 100%;
font: 1px/1px sans-serif;
}

.block .dtop {
height: 15px;
background-position: 0 0;
}

.block .dcont {
padding: 0 9px;
background: #fff url("../images/block.png") repeat-y -275px 0;
}

.block .dcont .dpad {
padding-bottom: 6px;
}

.block .btl h4 {
margin-top: 5px;
float: left;
text-transform: uppercase;
font-size: 1.15em;
color: #3f4b51;
}

.block .btl{
background: url("../images/btlblocks.png") repeat-x 0 100%;
padding: 0 15px;
height: 31px;
border-bottom: 2px solid #f1f1f1;
}

Я так понял что нужно организовать это через теги <ul> и <li>. Но все накак не могу сделать чтобы норм отображалось

 

[joom-joom]

это margin-bottom заголовка мешает.
.../templates/Default/style/styles.css
строка 526
.block .btl h4 {
добавь margin-bottom: 10px;
}