CSS - 根据屏幕大小调整高度

Question

在css中调整和定位内容时，我总是遇到一些困难。我正在尝试创建一个在悬停时延伸的导航栏并显示导航栏项。我遇到了两个问题：

1. 当页面宽度发生变化时，扩展时的导航栏高度会发生变化，导致内容超出导航栏。我需要导航栏始终包含放在里面的物品。 （我尝试了min-height，但它消除了过渡效果。）
2. 当用户在导航栏上悬停时，导航栏项目会在完全展开之前进入。
3. 当我的鼠标越过导航栏时，它似乎在它甚至悬停在导航栏上之前被激活（如果你慢慢移动鼠标，你可以看到在鼠标进入导航栏之前，它会被触发）。

我将如何解决这些问题？

.menu{
  background: white;
  width:100%;
  height:15vh;
  position: fixed;
  left:0px;
  top:0px;
  z-index: 10;
  border-bottom: 0.4px solid red;
  transition: 0.5s ease-in-out;
}
.menu:hover{
  height: 40vh;
}
.menu:hover > .menu-item{
  display: block;
}
.menu-item{
  margin:2%;
  font-size:1.6em;
  color:black;
  margin-top: 1.4vh;
  display:none;
  height: 6vh;
  transition: 0.2s ease-in-out;
  border-bottom: 0.4px solid #C0C5CD;
}

<div class="menu">
  <h1><a>PostNote</a></h1>
  <br />
  <p class="menu-item"><a>Home</a></p>
  <p class="menu-item"><a>Notes</a></p>
  <p class="menu-item"><a>Add a Note</a></p>
  <p class="menu-item"><a>My Profile</a></p>
</div>

Answer 1

对于菜单项，您可以使用不透明度/高度而不是显示，您将获得平滑的动画

＆＃13;

＆＃13;

.menu{
  background: white;
  width:100%;
  min-height:10vh;
  position: fixed;
  left:0px;
  top:0px;
  z-index: 10;
  transition: 0.5s ease-in-out;
  border-bottom: 0.4px solid red
}
.menu h1 {
margin:5px 0;
}

.menu:hover > .menu-item{
  opacity:1;
  height: 6vh;
  margin-top: 1.4vh;
  padding-bottom:5px;
}
.menu-item{
  margin:2%;
  font-size:1.6em;
  color:black;
  margin-top: 0vh;
  margin-bottom:0;
  display:block;
  opacity:0;
  height: 0vh;
  transition: 0.2s ease-in-out;
  border-bottom: 0.4px solid #C0C5CD;
}

＆＃13;

<div class="menu">
  <h1><a>PostNote</a></h1>
  <p class="menu-item"><a>Home</a></p>
  <p class="menu-item"><a>Notes</a></p>
  <p class="menu-item"><a>Add a Note</a></p>
  <p class="menu-item"><a>My Profile</a></p>
</div>

＆＃13;

＆＃13;

＆＃13;