CSS: position:relative element encroaches over the top of another element -

i trying make this wordpress site responsive, adding following custom css:

@media (max-width:959px) {     .container, #menu, #featured, .slide .overlay, .slide .overlay2 {         width: 100%;     }     img {         max-width: 100% !important;         height: auto;     }     #menu {         height: auto;     } } 

however, when move width of browser view port 900px say, #menu (the top navigation menu) increase in height accommodate #menu's li elements have floated down , left, #content-full (the parent container of image slider) creep on bottom half of #menu, hiding li elements have been pushed down , left.

the theme contains:

#content-full {   position: relative; } 

so why #content-full act position: absolute?

thanks.

the problem not content header. #header has attribute height: 134px. , #menu inside header has been given position: absolute. since absolutely positioned elements taken out of context before rendering, parent (in case #header), not grow accommodate height of #menu expected. reason why height has been explicitly specified. content not behaving absolutely positioned. aforementioned behavior of header makes that.

one workaround provide additional style changes height of #header accommodate next row of menu.

something max-width: 959px

#header {     height: 174px; } 

this take care of second row of menu items. note: background image used menu break. because has been made single row of menu. suggest replacing background image, css-gradients , rounded borders.