I'm trying to create a fluid layout, it's my first one. Not sure if I'm understanding it correctly though. When I create my layout I use percentages? such as wrapper 100% max-width 980px.

I set the rest of my divs id or classes with different percentages to fit such as header 100%, content 100% max width: 670px, sidebar etc;

I set the background color but it doesn't appear. To do this do I add the overflow hidden?

I also have my navigation div which is .nav_main and I just put an unordered list in it with no class name. It has a drop down list but I'm having a problem styling it to work. This is what I have so far.

.nav_main {
clear: left;
float: left;
background: #b73434;
width: 100%;
overflow: hidden;
}

.nav_main ul {
     padding:0;
     margin:0;
     list-style: none;
     background:#000;
     height:36px;
}

.nav_main ul li {
     float: left;
     position:relative;
}

.nav_main ul li a, .nav_main ul li a:visited {
     display:block;
     color:#fff;
     width:104px;
     height:auto;
     line-height:20px;
     padding:10px;
     text-align:center;
}

.nav_main ul li a:hover {
     display:block;
     color:#000;
     background:#FFF;
     line-height:20px;
     padding:10px;
}

.nav_main ul li ul, .nav_main ul li:hover ul li ul {
     display: none;
}

.nav_main ul li:hover ul {
     display:block;
     position: absolute;
     top:36px;
     left:0;
     height:auto;
}

.nav_main ul li:hover ul li a {
     display:block;
     text-align:left;
     border-bottom:1px solid #FFF;
}

.nav_main ul li:hover ul li:hover ul {
     display:block;
     position:absolute;
     left:124px;
     top:0;
} 

My problem is all I can see is the first link but the rest seem to be hidden behind my next div which will be my .content_main DIV.

What am I doing wrong and how do I get it to appear?