Как сделать, чтобы выпадающие меню не отображали панель навигации в чистом виде CSS

Question

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

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

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

В раскрывающемся списке div с class="dropdown".

CSS

.navbar {
    display: flex;
    justify-content: space-between;
    background-color: white;
    width: 100%;
    }

.dropdown {
  color: black;
}

.dropdown-list {
  display: none;
}

.dropdown-item {
  color: blue;
}

.dropdown:hover .dropdown-list {
  display: flex;
  flex-direction: column;
}

HTML

<div class="navbar">
    <div class="dropdown">Menu
        <div class="dropdown-list">
            <div class="dropdown-item">AA</div>
            <div class="dropdown-item">BBBBB</div>
            <div class="dropdown-item">CCC</div>
        </div>
    </div>
    <div>DDD</div>
    <div>EEEEE</div>
</div>

Вы можете просмотреть код в действии здесь, нажмите [Меню] слева, чтобы увидеть раскрывающийся список. Вместо того, чтобы расширять панель навигации, я хочу, чтобы она располагалась поверх содержимого: Codepen

Answer 1

вот вам, используйте этот кусок кода

.navbar {
  display: flex;
  justify-content: space-between;
  background-color: lightgray;
  width: 100%;
  position:fixed;
  top:0;
  left:0;
  right:0;
}

Вы можете использовать этот код для выпадающего меню:

.dropdown-list {
  display: none;
  background:#f00;
  padding:10px;
  position:fixed;
  top:20;
  left:0;
  right:0;
}

top атрибут должен иметь размер заголовка или больше

Answer 2

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

.dropdown {
color: black;
position:relative;
}
.dropdown-list {
display: none;
background:#f4f4f4;
position:absolute;
top:10px;
left:10px;
padding:5px;
text-align:center;
}

Весь код:

.navbar {
  display: flex;
  justify-content: space-between;
  background-color: lightgray;
  width: 100%;
}

.dropdown {
  color: black;
  position:relative;
}

.dropdown-list {
  display: none;
  background:#f4f4f4;
  position:absolute;
  top:18px;
  left:10px;
  padding:5px;
  text-align:center;
}

.dropdown-item {
  color: blue;
}

.dropdown:hover .dropdown-list {
  display: flex;
  flex-direction: column;
}

    <div class="navbar">
        <div class="dropdown">Menu
            <div class="dropdown-list">
                <div class="dropdown-item">AA</div>
                <div class="dropdown-item">BBBBB</div>
                <div class="dropdown-item">CCC</div>
            </div>
        </div>
        <div>DDD</div>
        <div>EEEEE</div>
    </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies dapibus nibh sit amet vestibulum. Nam consequat, erat eu lobortis ornare, turpis dui finibus ligula, quis vulputate mauris nunc vel mauris. In et justo id nisi egestas scelerisque. Sed blandit, risus vitae condimentum varius, lacus tortor congue dolor, et tristique urna arcu eu eros. Quisque consequat, augue vitae tincidunt porttitor, risus eros posuere nulla, sed euismod ante est sit amet orci. Cras mattis at nibh vel lobortis. Fusce feugiat iaculis mattis. 
Sed condimentum, neque quis consectetur venenatis, augue dolor tincidunt odio, vel dapibus leo orci ac metus. Aliquam ut commodo lectus, sagittis fermentum lorem. Suspendisse euismod sollicitudin turpis, ac imperdiet elit imperdiet vitae. Quisque imperdiet cursus velit. Etiam leo ligula, iaculis nec sollicitudin in, venenatis nec tellus. Duis ut quam fermentum, iaculis nisl eu, aliquet nunc. Proin maximus diam lorem, et molestie tortor porttitor sodales. Nam at urna tempus, ultricies sapien id, semper augue. Donec in felis ante. Mauris eu dignissim est. 
Donec ullamcorper sollicitudin tortor. Nam tortor tortor, cursus nec lacus non, convallis gravida sapien. Donec ac libero sollicitudin, varius tortor vel, blandit nibh. Quisque ligula erat, lobortis sit amet urna ut, efficitur blandit turpis. Nam tempus fringilla odio, eleifend feugiat libero fermentum eget. Suspendisse non tempor lectus. Sed vel fermentum sapien. Vivamus non lorem arcu. In egestas feugiat eros ut suscipit. Ut sit amet lorem ut erat ornare blandit sed a felis. Nulla facilisi. In ullamcorper accumsan facilisis. Suspendisse potenti. Morbi gravida tristique sollicitudin. Quisque et iaculis nibh. Maecenas tempus ex ac mi convallis suscipit. 
Nam varius elit eget mauris interdum tempus. Cras nec sodales felis. Suspendisse elit magna, auctor id suscipit non, fringilla id lacus. Nullam mattis justo arcu, at consequat eros pulvinar id. Morbi varius, elit elementum ornare condimentum, risus tellus sollicitudin ex, nec mattis risus diam quis nibh. In nec efficitur ipsum. Ut ac sapien id libero dapibus faucibus. 
Suspendisse tempor mauris sem, pulvinar finibus magna lacinia id. Proin vel risus quis nisl volutpat gravida ut interdum tellus. Nulla laoreet scelerisque ipsum, eget elementum augue dignissim vel. Morbi pretium felis non urna maximus, nec pellentesque ante dignissim. In at efficitur diam, pulvinar aliquam justo. Aenean in erat tellus. Duis sem mauris, placerat nec ullamcorper sed, posuere tincidunt purus. Proin eleifend ipsum est, sed volutpat quam mattis vitae. Integer vitae ultricies felis. 

Answer 3

Вы можете использовать position: fixed в своем классе .nav. это заставляет элемент всегда оставаться в одном и том же месте, даже если страница прокручивается. вот код .