Подменю HTML - PullRequest
Новая
       64

Подменю HTML

2 голосов
/ 22 сентября 2019

Я хочу создать панель меню на веб-сайте с подменю.Я не могу исправить следующие проблемы: 1. Элементы подменю отображаются в том же окне, что и элементы подменю 2. Элементы подменю всегда занимают место, даже если они невидимы 3. Элементы подменю отображаются при наведении курсораполе подменю, но они должны отображаться только при наведении курсора на пункт меню, к которому они принадлежат.

К сожалению, мне приходится использовать онлайн-инструмент, который определяет меню так, как оно написано в приведенном ниже коде.(menulevel1 и menulevel2) 

<ul class="dropdown-menu">
<li class="menulevel1"><a class="" href="#>Timetable</a></li>
<li class="menulevel1"><a class="" href="#">Subjects</a></li>
<li class="menulevel2"><a class="" href="#">Chemistry</a></li>
<li class="menulevel2"><a class="" href="#">Maths</a></li>
<li class="menulevel2"><a class="" href="#">PE</a></li>
<li class="menulevel1"><a class="" href="#">Food</a></li>
<li class="menulevel1"><a class="" href="#">Drinks</a></li>

Пожалуйста, дайте мне знать, что я делаю неправильно.Я действительно ценю твою помощь.

Код: https://jsfiddle.net/TheBB23/q6gncy07/

enter code here

Спасибо

Ответы [ 3 ]

0 голосов
/ 22 сентября 2019

Закрыть menu1 в собственном теге и то же самое для menu2.Не забудьте закрыть каждый тег.

0 голосов
/ 22 сентября 2019 
<ul>
        <li>
            <a href="">Birds</a>
            <ul>
                <li><a href="">Ratites</a></li>
                <li><a href="">Fowl</a></li>
                <li><a href="">Neoaves</a></li>
            </ul>
        </li>
        <li>
            <a href="">Mammals</a>
            <ul>
                <li><a href="">Monotremes</a></li>
                <li><a href="">Marsupials</a></li>
                <li><a href="">Placentals</a></li>
            </ul>
        </li>
        <li>
            <a href="">Reptiles</a>
            <ul>
                <li><a href="">Lizards and snakes</a></li>
                <li><a href="">Tortoises and turtles</a></li>
                <li><a href="">Crocodilians</a></li>
                <li><a href="">Tuatara</a></li>
            </ul>
        </li>
        <li>
            <a href="">Amphibians</a>
            <ul>
                <li><a href="">Frogs and toads</a></li>
                <li><a href="">Salamanders and newts</a></li>
                <li><a href="">Caecilians</a></li>
            </ul>
        </li>
    </ul>

Примените CSS к этому, и вы готовы пойти

0 голосов
/ 22 сентября 2019

Гнездо меню уровня 2 внутри темы li.

    `<li class="menulevel1"><a class="" href="#">Subjects</a>
    <ul>
    <li class="menulevel2"><a class="" href="#">Chemistry</a></li>
    <li class="menulevel2"><a class="" href="#">Maths</a></li>
    <li class="menulevel2"><a class="" href="#">PE</a></li>
    </ul>
    </li>`
...