Как вы можете создать кросс-браузерное меню CSS, которое не требует предоставления стиля для КАЖДОГО УРОВНЯ меню - PullRequest
Новая
       10

Как вы можете создать кросс-браузерное меню CSS, которое не требует предоставления стиля для КАЖДОГО УРОВНЯ меню

1 голос
/ 27 октября 2009

У меня есть меню, которое будет автоматически создано на странице asp.net. Я пытаюсь использовать кросс-браузерное меню на чистом CSS, но как мне настроить его так, чтобы каждый последующий дочерний элемент автоматически скрывался / отображался без определения стиля для каждого уровня меню.

Это единственный способ сделать это с помощью CSS?

По сути, я ищу способ использования css для отображения / скрытия дочерних пунктов меню без определения стиля для каждого уровня - тем более, что я не знаю, сколько будет уровней.

Ответы [ 2 ]

1 голос
/ 27 октября 2009

Вы должны быть в состоянии сделать это, указав только до второго уровня 

<html>
<head>
<style>
.mnusub li ul{ display:none; }
.mnusub li:hover > ul{ display: block; }
</style>
</head>
<body>
<ul class="mnusub">
    <li>test1
        <ul class="mnusub">
            <li>test2</li>
            <li>test11
                <ul class="mnusub">
                    <li>test3</li>
                    <li>test4</li>
                    <li>test5</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>test5
        <ul class="mnusub">
            <li>test6</li>
            <li>test7</li>
            <li>test8</li>
        </ul>
    </li>
    <li>test9</li>
    <li>test10</li>
</ul>
</body>
</html>

Ключ здесь - это селектор ">", так как он определяет прямых потомков, а не подчиненных потомков

наслаждайся

0 голосов
/ 27 октября 2009

Когда вы хотите воздействовать на каждого дочернего элемента индивидуально , но без необходимости создавать правила стиля для каждого из этих дочерних элементов, вам потребуется дополнительная логика, которую CSS не предоставляет. Вы можете использовать что-то вроде PHP для этой логики или использовать Javascript / jQuery. В этом случае вы можете переключать CSS-классы на child [x] через jQuery, и вам нужно только стилизовать эти классы. Тогда не имеет значения, какой ребенок получил класс, он будет соответствующим образом оформлен. Обратите внимание, что сначала вы должны убедиться, что ваше меню по крайней мере можно использовать без Javascript, чтобы пользователи не зависели от него.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...