Многоуровневое меню с вложенными тегами ul - PullRequest
Новая
       0

Многоуровневое меню с вложенными тегами ul

0 голосов
/ 28 мая 2020

Не могу понять, как заставить работать следующее меню правильно. Когда вы наводите указатель мыши на вложенные элементы первого ul, он приводит к первому вложенному элементу следующего ul, и то же самое происходит, когда вы пытаетесь навести курсор на второй вложенный элемент. Что мне нужно добавить в CSS, чтобы отделить эти элементы друг от друга? 

    <style>
        #blok li{
            padding-bottom: 1px;
            position: relative;
            list-style: none;
        }
        #blok ul{
            width: 140px;
            position: absolute;
            top: 0;
            left: 160px;
            padding-left: 1px;
            visibility: hidden;
        }
        #blok li:hover ul{
            visibility: visible;
            width: auto;
            height: auto;
        }
        #blok a, #blok li:hover li a{
            display: block;
            font: 14px/30px calibri;
            font-weight: bolder;
            text-decoration: none;
            padding: 0 10px;
            width: 140px;
            color: black;
            background-color: hsl(120, 75%, 50%);
        }
        #blok li:hover a, #blok li:hover li:hover a{
            background-color: hsl(120, 80%, 15%);
            color: white;
            text-decoration: underline overline;
        }
    </style>
</head>
<body>
    <ul id="blok">
        <li><a href="start.html">Start</a>
            <ul>
                <li><a href="forum.html">Forum</a></li>
                <li><a href="aboutus.html">O nas</a></li>
            </ul>
        </li>
        <li><a href="nowe.html">Aktualności</a>
            <ul>
                <li><a href="newsy.html">Newsy</a></li>
                <li><a href="wydarzenia.html">Wydarzenia</a></li>
                <li><a href="technologia.html">Technologia</a></li>
            </ul>
        </li>
        <li><a href="szkolenia.html">Szkolenia</a>
            <ul>
                <li><a href="kurs1.html">HTML</a></li>
                <li><a href="kurs2.html">CSS</a></li>
                <li><a href="kurs3.html">Javascript</a></li>
            </ul>
        </li>
        <li><a href="uslugi.html">Usługi</a>
            <ul>
                <li><a href="online.html">Kursy online</a></li>
                <li><a href="skladanie.html">Zestawy komputerowe</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

1 Ответ

0 голосов
/ 28 мая 2020

Проблема 1. Переключение списка при наведении курсора на второй элемент вложенного списка

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

Добавьте это правило, и оно должно работать:

#blok ul { z-index: 2; /* Or anything greater than 1 */ }

Проблема 2. Вложенные списки появляются при наведении курсора к основному списку, а не только к нему

Поместите свои background-colors в комментарий, затем используйте background-color на #blok li, чтобы увидеть границы этого элемента, и вы поймете, почему это происходит .

Вам нужно, чтобы ваши #blok li элементы были короче, поскольку теперь они занимают всю ширину контейнера.

Два способа решить эту проблему.

1 . 

#blok {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
}

#blok li {
  display: inline-block;
}

или

2. 

#blok li {
  width: 160px;
}

#blok a,
#blok li:hover li a {
  width: calc(100% - 2 * 10px);
}

Я использую вашу разметку здесь, но лучше разделить #blok a и #blok li:hover li a

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

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

...