Question

I trying to set up my nav so I have my list items and i have a list inside a list item (sub-menu) like so…

<style>
    .headerNav{
        color:#FFF;
        margin:0 auto;
        width: 1280px;
        padding-top: 148px;
    }

    .headerNav ul{
        list-style-type:none;
        margin:0;
        padding:0 0 0 8px;
    }

    .headerNav li{
        float:left;
    }

    .headerNav ul a{
        font-size:24px;
        color:#FFF;
        display:block;
        padding:0 55px 0 0;
        text-decoration:none;
        text-transform:capitalize;

    }

    .headerNav ul a:hover{
        color:#a40404;
        text-decoration:none;
    }
</style>

<div class="headerNav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#" class='galleryNavToggle'>Gallery</a>
            <ul>
                <li><a href="#">Categoies</a></li>
                <li><a href="#">Products</a></li>
            </ul>
        </li>
        <li><a href="#" class='galleryNavInfoToggle'>Info</a>
            <ul>
                <li><a href="#">F.A.Q.</a></li>
                <li><a href="#">CV</a></li>
                <li><a href="#">Artist Bio</a></li>
                <li><a href="#">Video</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </li>
    </ul>
</div><!-- headerNav -->

The problem is that the list items with a list inside have a massive width and I cant see my sub nav at all, any help would be greatly appreciated.

Answer 1

I’ve created a fiddle with your html and css and added a bit of css of my own to outline the sublist a bit better: http://jsfiddle.net/bymLV/

I removed float: left from the sublist, because this is what makes your list so extremely wide. That and the actual width of 1280px you are giving .headerNav.