Fluid layout with dropdown nav

[johnjf]

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?

[tomrogers123]

Any chance of a [CodePen](http://codepen.io/) so we can fix it and send back to you?

[Paulie_D]

Here’s one I have saved :http://codepen.io/Paulie-D/pen/29afe4b2f00f534fe238ffec0f855384

I have given each level of nav uls its own class for simplification of the CSS.

Also, it uses ‘inline-block’ for the list items instead of floats as I am convert to that method.

[johnjf]

Thanks for the help guys and thanks Paulie_D. This navigation works perfectly.

[Author]

Posts