Hover-list только в CSS

У меня возникли проблемы с меню опрокидывания CSS.

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

Я хотел бы иметь меню наведения на CSS только потому, что на веб-сайте, над которым я работаю, много пользователей, которые намеренно отключили скрипты (JavaScript).

Я не понимаю, в CSS, как можно сделать " sub меню " отображается под элементом родительского списка, когда пользователь наводит курсор на элемент родительского списка. Может кто-то пожалуйста, помогите мне понять, как это работает в CSS?

ниже изображение того, что я имею в виду:

enter image description here

1 ответов


следующее будет работать в своей основной форме, но стиль для ваших собственных вкусов (положение, границы, цвета и т. д.):

<ul>
    <li>Simple List item
        <ul>
            <li>sub menu item 1</li>
            <li>sub menu item 2</li>
            <li>sub menu item 3</li>
       </ul>
    </li>
</ul>

С CSS:

ul li {
    position: relative;
}

ul ul {
    position: absolute;
    top: 1em;
    left: 0;
    display: none;
}

ul > li:hover ul {
    display: block;
}

JS Fiddle demo.