Не могу сделать выпадающее горизонтальное меню

[Faberton]

Здравствуйте! У меня образовалась такая проблемка при создании горизонтального меню.

В общем, само меню я сделал, а вот  как реализовать чтобы при наведении курсора на пункт снизу появлялся еще один пункт с контентом я не знаю. Подскажите пожалуйста как такое реализовать, а то я уже не знаю что делать. Искал в интернете, но все способы которые там описываются мне не подходят - меню либо ломается, либо вообще не работает.

 

Вот кстати код:

css:

.horiz{width:1000px;height:40px;margin:auto;padding:0px;list-style:none;}

 .horiz li{float:left;height:40px;border-bottom:1px solid #2e4a5b;}

 .horiz A:hover{background:url(/devmedia/_images/grad/headerbackgroundpnglihover.png) #3b5469}

 .horiz A{text-shadow:#273f4d 1px 1px 0;font-size:18px;color:#ccdcee;display:block;line-height:40px;min-width:auto;width:auto;text-align:center;text-decoration:none;padding:0 5px 0 5px;}

html:

 <ul class="horiz">

 <li><a href="$HOME_PAGE_LINK$"><img src="/devmedia/_images/media/logoheader.png" title="Developers — Информационный портал для разработчиков" style="width:39px;heigth:39px;"></a></li>

 <li><a href="/load">Файлы</a></li>

 <li><a href="/publ">Статьи</a></li>

 <li><a href="/forum">Форум</a></li>

 </ul>

Edited March 1, 2015 by Faberton

[satantx]

http://jsfiddle.net/a92cnya0/

[Faberton]

http://jsfiddle.net/a92cnya0/

 

Благодарю. 

Edited March 1, 2015 by Faberton