Как создать многоуровневое выпадающее меню только с HTML и CSS (возможно, с небольшим JavaScript) - PullRequest
Новая
       19

Как создать многоуровневое выпадающее меню только с HTML и CSS (возможно, с небольшим JavaScript)

1 голос
/ 21 января 2011

Новичок в CSS и может найти только одноуровневые меню.Вот меню и пункты списка: 

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Forums</a>
        <ul>
            <a href="#">Basketball</a>
            <ul>
                <li>
                    <a href="#">Trading</a>
                </li>
                <li>
                    <a href="#">Personal Collections</a>
                </li>
                <li>
                    <a href="#">Box Breaks</a>
                </li>
            </ul>
        </ul>
    </li>
</ul>

Как видите, он будет многоуровневым.Теперь, с помощью имеющегося у меня CSS, сначала отображаются только Дом и Форумы, а когда я наведите курсор мыши на Форумы, отображается Баскетбол ... но также и последующие пункты меню.Я хочу, чтобы они оставались скрытыми, пока я не наведусь на баскетбол.Кто-нибудь знает, как сделать это с помощью всего лишь CSS или как можно меньше JavaScript?Благодарю.Вот код CSS, который у меня есть: 

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}

ul li
{
    position: relative;
}

li ul
{
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a
{
    display: block;
    text-decoration: none;
    color: #777;
    background: #bad8f8;
    padding: 2px 0 2px 10px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

li:hover ul
{
    display: block;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

Ответы [ 3 ]

1 голос
/ 21 января 2011

Вот рабочая демонстрация:

http://jsfiddle.net/rcravens/aqz8q/

Я сделал две вещи.

  1. Небольшая реструктуризация списка ul / li. Были некоторые элементы не в li.

  2. Используется li: hover> ul для выбора только прямых потомков.

Надеюсь, это поможет.

Bob

0 голосов
/ 21 января 2011

То, как вы структурировали свой CSS, заставляет всех потомков "Баскетбола" наследовать его. Вместо этого вам следует использовать селектор child (">") или: first-child. Посмотрите на разделы 5.5 и 5.6, чтобы понять, о чем я говорю: http://www.w3.org/TR/CSS2/selector.html

Если вы хотите создавать динамические меню, я настоятельно рекомендую использовать javascript вместо того, чтобы полагаться исключительно на css, если только вы не уверены, что многие люди, просматривающие ваш сайт, отключат JavaScript.

0 голосов
/ 21 января 2011

Попробуй добавить 

ul li ul{position: absolute; top: 0; left: 0; width: 250px; height: 250px; background-color: #EEE;}

И иди оттуда:)

...