如何将菜单更改为 CSS 中的堆叠？

Question

我正在尝试为网站制作响应式菜单。我希望我的菜单项相互堆叠，类似于移动网站上的大多数下拉菜单。我不确定是什么让我的内容对齐变形而不是对齐。我想摆脱额外的 space 以使每个项目在另一个项目之上对齐。 目前看起来是这样的：

我的目标是：

代码 https://codepen.io/curiousoddity/pen/ExKrVry

HTML

   <body>
   <header>
<div class="container">
<div id="homepage">
   <h1> Tim David</h1>
</div>
<div id="menu">
  <nav>
  <ul>
    <li><a href="#about">About </a></li> <!--have links go to part of the page-->
    <li><a href="#my-works">Gallery</a></li>
    <li><a href="#container">Contact</a></li>
  </ul>
</nav>
</div>
<section id="featured">
  <h2>Nature Lover & Adventure Seeker </h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>

CSS

  header{
min-height: 900px;
width: 100%;
background: linear-gradient(0deg, rgba(0,0,0,0.29850746268656714) 0%, rgba(0,0,0,0.30298507462686564) 100%), url(./sharad-bhat-Photo\ by\ Sharad\ Bhat\ on\ Unsplash.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;

header #homepage{
font-family: helvetica;
font-size: 20px;
margin-top: 20px;
font-weight: 100;
text-decoration: none;
text-transform: uppercase;
padding: 20px 40px 20px 40px;
float: left;

header #menu{
float: right;

header li{
float: left;
display: inline;
margin-top: 30px;
padding: 20px 60px 20px 20px;
font-family: helvetica;
cursor: pointer;
letter-spacing: 1.5px;

header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;

ul{
margin:0;
padding:0;

#featured{
color: #ffffff; 
justify-content: center;
text-align: center;
padding-top: 500px;

#featured h2{
font-family: Arial;
font-size: 30px;
text-transform: uppercase;
font-weight: 500;

#featured p{
font-family: arial;
font-size: 20px;
line-height: 1.5;


 @media(max-width: 768px){

header #homepage, header #menu{
    margin: 0;
    width: 100%;
    position: fixed;
    

}
header #homepage {
    background: white;

   
}

nav{
    width: 100%;
    background: white;
    position: absolute;
    margin-top: 125px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;


}

nav ul{
    background: white;
}

nav a{
    color: black;
  }

}

Answer 1

您将 flex 属性放在 nav 元素而不是 ul 子元素上。只需将其添加到您现有的 CSS:

nav ul {
  background: white;
  display: flex;
  flex-direction: column;
}

如果需要，您可以从父 nav 元素中删除 flex 元素。

如何将菜单更改为 CSS 中的堆叠？

How to Change Menu to Stack in CSS?

html

css

menu

drop-down-menu