list inside a list CSS and HTML

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.

Could you post your css as well please?

T. Junghans
– T. Junghans

2012-03-16 20:31:11 +00:00
Commented Mar 16, 2012 at 20:31 — T. Junghans
– T. Junghans, Commented Mar 16, 2012 at 20:31
Do you want to achieve something like cssdesk.com/uPx3N ?

Zeta
– Zeta

2012-03-16 20:47:34 +00:00
Commented Mar 16, 2012 at 20:47 — Zeta
– Zeta, Commented Mar 16, 2012 at 20:47

Jason Gennaro · Accepted Answer · 2012-03-16 20:55:02Z

3

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.

edited Mar 16, 2012 at 20:55

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

answered Mar 16, 2012 at 20:46

T. Junghans

11.7k8 gold badges55 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

list inside a list CSS and HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related