Как реализовать многоуровневое горизонтальное меню??

Question

[sugarufc]

Меню такое нужно сделать таким, т.е задать margin сверху, но проблема в том, что когда мышь проходит это расстояние (margin-top) нижнее меню исчезает. Как можно сделать это правильно, чтоб был отступ и меню не исчезало?
Вот код

<ul class="menu">
    <li><a href="/">Главная</a></li>
    <li><a href="#">Новости</a>
        <ul>
            <li><a href="#">Наука</a></li>
            <li><a href="#">Культура</a></li>
            <li><a href="#">Образование</a></li>
        </ul>
    </li>
    <li><a href="#">Статьи</a>
        <ul>
            <li><a href="#">Дизайн</a></li>
            <li><a href="#">Программирование</a></li>
            <li class="dir"><a href="">Оптимизация</a>
                <ul>
                    <li><a href="#">В Google</a></li>
                    <li><a href="#">В Yandex</a></li>
                </ul>
            </li>
            <li><a href="#">Маркетинг</a></li>
        </ul>
    </li>
    <li><a href="/about">О сайте</a></li>
</ul>

.menu, .menu li ul{
    margin:0px;
    padding:0px;
    list-style:none;
}
.menu > li{
    float:left;
    background: #242424;
    text-align: center;
    padding: 7px 15px;
    margin-left: 1px;
    cursor: pointer;
}
.menu > li ul{
    display:none;
    position:absolute;
    text-align: left;
    z-index:100;
    background-color:#393939;
    width:200px;    
    margin-top:5px;
}
.menu > li > ul{
    margin-left:-13px;
    font-size:80%;
}
.menu > li:hover > ul{display:block;}
.menu > li:hover{
    background: #7d7e7d;
}
.menu > li li{
    padding:4px 0 4px 8px;
}
.menu > li > ul > li.dir{
    background:url('arrow.png') 96% center no-repeat;
}
.menu > li > ul > li:hover > ul{display:block;}
.menu > li > ul  li:hover{
    background-color:#646464;    
}
.menu > li > ul > li > ul{
    margin-left:190px;
    margin-top:-17px;
    width:220px;
}
.menu > li a{
    text-decoration: none;
    color: #D1D1D1;
    display:block;
}

Answer 1

[Александр Таратин]

Подсказка
jsfiddle.net/QW01_01/r3900jyc
Только надо цвет фона задавать не элементу li а элементу a, но мне лень переписывать стили для ссылок, думаю и так принцип понятен.