Блог

Главная - Вопросы по программированию - Иерархический список с использованием HTML / CSS

Иерархический список с использованием HTML / CSS

#css #html

#css #HTML

Вопрос:

Я пытаюсь создать меню верхнего уровня, подобное тому, которое вы видите в большинстве приложений, используя HTML, CSS и Javascript. Я знаю, что существует множество готовых списков, но я хочу создать свой собственный.

 ----------------------
| File | Edit | Help |
----------------------
| New     |
| Save    |
| Save As |
 ---------

Я пробовал различные стили CSS, чтобы правильно оформить следующий список. Это подходящая структура HTML, или вы бы порекомендовали другую? Какой CSS требуется для правильного оформления меню? На данный момент меня не беспокоит функциональность.

Я открыт для любых методов HTML 5, поскольку это всего лишь личный проект.

 <ul>
    <li>File</li>
    <ul>
        <li>New</li>
        <li>Save</li>
        <li>Save As</li>
    </ul>
    <li>Edit</li>
    <ul>
        <li>Cut</li>
        <li>Copy</li>
        <li>Paste</li>
    </ul>
    <li>Help</li>
    <ul>
        <li>About</li>
    </ul>
</ul>

Комментарии:

1. Ваша HTML-разметка неверна. ul не может находиться внутри другого ul напрямую. Он должен быть внутри li сверху ul .

Ответ №1:

 <ul>
    <li>
        <a href="#">File</a>
        <ul>
            <li><a href="#">New</a></li>
            <li><a href="#">Save</a></li>
            <li><a href="#">Save As</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Edit</a>
        <ul>
            <li><a href="#">Cut</a></li>
            <li><a href="#">Copy</a></li>
            <li><a href="#">Paste</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Help</a>
        <ul>
            <li><a href="#">About</a></li>
        </ul>
    </li>
</ul>

Взгляните на пример здесь:

http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery