DropDown Menu and z-index

Topics: General, Standard packages
May 17, 2011 at 7:40 PM

Hi there

On starter site I replaced the Menu with DropDown menu. The problem is DropDown Menu bottom parts are not visible (goes under content section)

I tried changing Z-index of DropDown menu to higher number, it did not solve the problem.

Any idea about how to solve this issue

Thanks in advance


May 17, 2011 at 9:05 PM


I solved it.

.row { overflow: hidden; }  was causing the issue. 

 if anyone interested

May 18, 2011 at 9:27 AM


C1 starter site is based on cssgrid.net 12 column grid and this CSS rule  overflow: hidden;   for .row  looks like important rule as without this  layout becomes broken (e.g footer container is not at the bottom of the page and other issues)

In that case another solution should be applied (modify DropDown menu styles), for example:

1) declare additional CSS rules for #NavigationDropDown (copy rules from .row just without overflow: hidden;):

#NavigationDropDown { 

width: 100%;
max-width: 1140px;
margin: 0 auto;


and then do not put DropDown Menu function within .row DIV,  it will be within #NavigationDropDown DIV.

May 18, 2011 at 5:19 PM

Hello Inna

I applied the changes as you suggested. Thanks alot, Cheers