Щас учусь делать простые веб-странички, решил сделать простую страничку с выпадающим вертикальным меню (типа как на д2ру). Я столкнулся с одной проблемой, и причем, уже не в первый раз: выпадающее меню перекрывается контентом, как на картинке:

Спойлер: "Картинка 1"

Красный блок, который перекрывает меню, зафлоачен вправо,в этом-то и проблема, я полагаю (я знаю, что они выпадают из потока), но я не могу понять как мне установить перекрытие.
Причем, у меня есть еще одна страница, где абсолютно идентичная схема, но меню не перекрывается(хотя перекрывалось некоторое время, потом само исчезло непонятно почему):

Спойлер: "Картинка 2(вдохновлено Д2ру)"

Подскажите, ради Бога, как мне установить перекрытие чертового меню(z-index не прокатывает)

Спойлер: "HTML-код 1 страницы"

1

• 
  
  
  
  
  
• ˆ
  
  
  
  
  
• 1
  
  
  
  
  
• 1
  
  
  
  
  
• 1
  
  
  
  
  
• 1
  
  
  
  
  
• 
  
  
  
  
  
  1
  
  
  
  
  
  
  • 
    
    
    
    
    
    
    
  • 1
    
    
    
    
    
    
    
  • 1
    
    
    
    
    
    
    
  • 1
    
    
    
    
    
    
    
  • 1
    
    
    
    
    
    
  
  
  
  
  
  
  
  
  
  

1

1 – 1

1 1

1 1

1 1

1 1

1

Спойлер: "CSS-код первой страницы"

/*Общие стили*/

@import "http://webfonts.ru/import/bravo.css";
html{background-image:url('images/bg38.png');}
body, .main-content, .promo-bckgr, h1,article,section{

font-family: 'Bravo';

margin:0;

padding:0;
}
body{margin:0 10% 0 10%;}

/*Лого сайта*/

.page-header{font-size:0px;}
.site-name{

width:100%;

background-color:#1c1c1c;

box-shadow: 0 0 2px 1px black;

font-size:40px;

font-style: italic;

color:white;

text-align: center;

vertical-align: middle;

line-height:100px;

height:100px;
}
.site-name span{margin-left:20px;}

/*Верхнее меню*/
.head-menu{

box-shadow:0 0 3px 2px black;

margin-top:50px;
}
.head-menu ul{

margin:50px 20px 0 20px;

color:white;

font-size:0px;

margin:0;

padding:0;

height:49px;

border-bottom:1px solid black;

background-color:#1e1d1d;

list-style: none;
}
.head-menu ul li{

background:#1e1d1d;

color:white;

font-size: 25px;

width:16.6%;

height: 48px;

vertical-align: middle;

line-height: 50px;

text-align: center;

padding: 0;

margin:0;

display: inline-block;

border-left:1px solid #403f3f;

border-right:1px solid black;

border-bottom:1px solid black;

}
.head-menu ul li:last-child{width:17%;}
.head-menu ul li:last-child:after{border-left:1px solid #403f3f;}
.head-menu ul li.homepage{width:50px; background:#1e1d1d url('images/home.png') no-repeat 50% 50%; border-right:1px solid black; border-left:none;}
.head-menu a, .head-menu a:active, .head-menu a:visited{text-decoration: none; color:inherit;}
.head-menu a{display:block;}
.head-menu ul li:hover{background-color:#851b00; transition:0.5s;}
.sub-menu{display:none;}
.head-menu ul.sub-menu li{display:block; width:183px;height:50px;border-top:1px solid #403f3f;}
.head-menu ul.sub-menu li:nth-child(2){line-height:25px;}
.head-menu li:hover ul{display:block; z-index: 100;}
.head-menu ul li.active {background-color:#851b00;}
.head-menu a.nav{background-repeat: no-repeat; background-position:5% 50%;}
a.news{background-image:url('images/news.png');}
/*Основной контент*/

.main-content {box-shadow:0 0 3px 0 black;}
.main-content {box-shadow:0 0 3px 2px black; height: 500px; margin:0; background-image:linear-gradient(to right, #ccc, #fff, #ccc);}
.about{margin:0 auto; width:50%; text-align:left;position: relative;}
.about h1{text-align:center; font-size:35px;}
.about p{font-size: 20px; }
.school{

float:right;

display: block;

width:200px;

height:266px;

background-color:red;

border-radius:5px;

border:3px solid #403f3f;
}
/*Форма регистрации*/

поиграй с позициями:

position: absolute;
position: relative;

помогло?

Garrix сказал(а):↑

помогло?

Нажмите, чтобы раскрыть...

Помогло задание position:relative выпадающему списку.
Спасибо большое

z-index еще погугли

А вообще советую изучить framework от twitter. Twitter Bootstrap. Очень быстро, удобно, красиво.

Garrix сказал(а):↑

А вообще советую изучить framework от twitter. Twitter Bootstrap. Очень быстро, удобно, красиво.

Нажмите, чтобы раскрыть...

Буэ, что за советы даешь такие? И клепать клоны? И так уже бутсовских дизайнов завались, аж тошнит

Nejamo сказал(а):↑

Буэ, что за советы даешь такие? И клепать клоны? И так уже бутсовских дизайнов завались, аж тошнит

Нажмите, чтобы раскрыть...

Обязательно делать в стандартном стиле? Из-за скриптов и разметки он хорош, быстро делается.

Garrix сказал(а):↑

Обязательно делать в стандартном стиле? Из-за скриптов и разметки он хорош, быстро делается.

Нажмите, чтобы раскрыть...

Не обязательно. Но 99% юзеров будут делать по стандарту, ибо лень что-то пилить, когда есть уже готовое, весьма недурное, но уже заезженное.