Grow your CSS skills. Land your dream job.

Fluid layout with dropdown nav

  • # February 20, 2013 at 11:01 am

    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?

    # February 20, 2013 at 11:07 am

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

    # February 20, 2013 at 12:20 pm

    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.

    # February 20, 2013 at 1:59 pm

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".