список внутри списка CSS и HTML - PullRequest
Новая
       6

список внутри списка CSS и HTML

1 голос
/ 17 марта 2012

Я пытаюсь настроить навигацию, чтобы у меня были элементы списка, и у меня есть список внутри элемента списка (подменю), например, так ... 

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

Проблема в том, что списокэлементы со списком внутри имеют большую ширину, и я вообще не вижу свою под-навигацию, любая помощь будет принята с благодарностью.

1 Ответ

3 голосов
/ 17 марта 2012

Я создал скрипку с вашими html и css и добавил немного собственного css, чтобы немного лучше выделить подсписок: http://jsfiddle.net/bymLV/

Я удалил float: left из подсписка, потому чтоэто то, что делает ваш список настолько широким.Это и фактическая ширина 1280px, которую вы даете .headerNav.

...