Исправить кластерный список в раскрывающемся списке HTML / CSS - PullRequest
Новая
       69

Исправить кластерный список в раскрывающемся списке HTML / CSS

0 голосов
/ 31 января 2020

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

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=”Cache-Control” content=”no-cache, no-store, must-revalidate”>
    <meta http-equiv=”Pragma” content=”no-cache”>
    <meta http-equiv=”Expires” content=”0”>
    <link rel="stylesheet" type="text/css" href="css/nav-style.css">
</head>

<body>
    <nav>
        <ul>
            <li>Home</li>
            <li class="dropdown-button">Forums


                <ul class="dropdown">
                    <li>Staff</li>
                    <li>Complaints</li>
                    <li>Applications</li>
                </ul>

            </li>
            <li>Store</li>
        </ul>

    </nav>
    <script>
        for(var i = 0;i<100;i++) {
            document.writeln("<br>");
        }

    </script>
</body>

CSS

nav {
    /* height: 70px; */
    background-color: rgb(66, 66, 66);
    z-index: 3;
    width: 100%;
    min-width: 236px;
}

nav > ul {
    display: inline-block;

    width: 100%;
    min-width: 240px;
    padding-left: 0;
}

nav > ul > li {
    display: inline-block;
    font-size: 2.2em;
    text-align: center;
    width: 33%;
    min-width: 150px;
    text-transform: uppercase;
}
nav > ul > li:hover {
    cursor: pointer;
}

nav > ul > li:after {
    top: 15px;
    content: '';
    display: block;
    border-bottom: 3px solid red;
    width: 100%;
    transform-origin: 50%;
    transform: scaleX(0);
    transition: transform 0.7s ease-in-out;
}

nav > ul > li:hover:after {
    transform: scaleX(1);
}

.dropdown li {
    position: absolute;
    font-size: 0.7em;
    display: block;
    width: 100%;
    text-transform: none;
    margin-right: 100%;
}

.dropdown {
    display: none;
    height: 100%;
}

.dropdown-button {
    height: 100%;
}

.dropdown-button:hover .dropdown {
    display: block;
}

Мой код (Fiddle):
https://jsfiddle.net/6b4epg7a/

Заранее спасибо!

1 Ответ

1 голос
/ 31 января 2020

Вам необходимо добавить позицию: относительно родительского раскрывающегося списка li: 

.dropdown-button {
    position: relative;
}

и позицию: абсолютную по отношению к дочернему элементу. 

.dropdown {
    position: absolute;
    display: none
}

.dropdown li {
  line-height: 27px;
  font-size: 0.7em;
  text-transform: none;
  list-style: none;
}

проверьте jsfiddle: https://jsfiddle.net/nza9gy8k/1/

Чтобы узнать больше о позиционировании в css. чек https://developer.mozilla.org/en-US/docs/Web/CSS/position

...