列表内的列表 CSS 和 HTML答案

【问题标题】：list inside a list CSS and HTML列表内的列表 CSS 和 HTML
【发布时间】：2012-03-16 20:29:41
【问题描述】：

我试图设置我的导航，所以我有我的列表项，并且我在列表项（子菜单）中有一个列表，就像这样......

<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 -->

问题是里面有一个列表的列表项有一个很大的宽度，我根本看不到我的子导航，任何帮助将不胜感激。

【问题讨论】：

你能把你的css也发一下吗？
你想实现类似cssdesk.com/uPx3N 的东西吗？

标签： html css html-lists

【解决方案1】：

我用你的 html 和 css 创建了一个小提琴，并添加了一些我自己的 css 来更好地概述子列表：http://jsfiddle.net/bymLV/

我从子列表中删除了float: left，因为这就是使您的列表如此广泛的原因。这和你给.headerNav 的1280px 的实际宽度。

【讨论】：