W jaki sposób poprawić kod żeby rozwijane menu wyświetlało się na wierzchu?

Dodałam do menu rozwijaną listę i niestety chowa się pod kolejną część strony 
Tak wygląda kod w less (w zasadzie tylko zmienne go różnią od css, ale w tym przypadku nie są istotne)
Co zrobić żeby lista wyświetlała się zawsze na wierzchu?

nav{
.m_auto;
.p_zero;
.relative;
.visible;
.el_width;
height:40px;
border:2px solid #fff;
background-color: @pink;
.image_center_position;
.border_radius;
ol{
.zero;
list-style-type:none;
li{
float: left;
.relative;
.p_zero;
width: 20%;
&:hover ul{
display:block;
/*jeśli zostawię absolute chowa się pod następną część*/
position:absolute;
}
ul{
.zero;
list-style-type:none;
display:none;
li{
background-color: @pink;
border:2px solid white;
.border_radius;
clear: left;
width: 100%;
height:20%;
.relative;
.p_zero;
}
}
a{
display: block;
text-decoration: none;
color: #fff;
padding: 10px;
/*margin:auto;*/
text-align: center;
font-family: 'Lucida Sans Unicode’;
font-size: 11px;
font-weight: bold;
&:hover{
margin: 1px 0;
.border_radius;
background-color: @blue;
background-position: center;
.pointer;
}
}
}
}
}
Przepraszam za brak formatowania ale nie wiem jak to tu zmienić :/