Двухуровневое меню

[alex.kv]

Добрый день! Никак не могу решить проблему со своим меня на сайте. По макету все должно выглядеть следующим образом

http://c2n.me/3cdJWb4

Но у меня почему-то .sub-menu оказывается под сладером( пробовал выставлять для них z-index. Ничего не помогает. Подскажите как решить проблему?

Вот сам сайт: http://justexemple.host56.com/

 

[satantx]

nav .menu {text-align: center;width: 100%;overflow: hidden;margin-top: 10px;}

overflow: hidden; <— убери

[alex.kv]

Возникла еще одна проблема. Я поднял sub-menu на высоту которая указана в макета и теперь не могу выбрать элементы дополнительного меню, так как когда пытаюсь навести на него оно тут же исчезает, так как я убираю мышь с основного пункты.

Как такую вещь решить?

[satantx]

nav .menu {text-align: center;width: 100%;/* margin-top: 10px; */}nav .menu li {display: inline-block;padding: 20px 5px 5px 5px;position: relative;margin-right: 2%;}nav .menu li ul.sub-menu {display: none;background: rgba(0,0,0,.6);position: absolute;/* top: -155px; */bottom: 100%;left: -25px;width: 230px;padding: 15px;}nav .menu li ul.sub-menu li {display: block;width: 100%;text-align: left;list-style-type: circle;padding: 5px;}

Заменить в css

[alex.kv]

Спасибо большое! Без вас я бы разбирался очень долго.

А почему overflow: hidden не давало показываться меня? 

[satantx]

Потому что overflow: hidden - отображает только область внутри элемента, остальное будет скрыто.

http://htmlbook.ru/css/overflow