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

您可以通过将下拉列表的position属性设置为绝对值并将其父容器设为相对值来实现。

.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.

如何使导航栏下拉菜单不扩展纯CSS中的导航栏

2 个答案: