Html 使用列表项的CSS3弹出式导航

我对这个网站和HTML/CSS编码都比较陌生。我有一个任务，我想用列表制作一个CSS生成的弹出菜单。这是我在页面顶部导航时使用的HTML，每当我试图更改CSS中列表项的高度以提供弹出效果时，它会向下推我的其余内容，而不是占用上面的空间。以下是我目前的代码：

nav{
保证金：0；
填充：0；
溢出：自动；
}
李海军{
宽度：18%；
保证金：5px；
填充：0；
列表样式类型：无；
边框左上半径：15px；
边框右上角半径：15px；
边框：5px纯黑；
背景色：黑色；
浮动：左；
}
导航a{
显示：块；
填充：0；
文字装饰：无；
颜色：白色；
文本对齐：居中；
}
李导航：悬停{
边际上限：0px；
高度：100px；
}

这里有一种方法可以让您的菜单弹出，而无需按下内容：

nav{
保证金：0；
填充：0；
溢出：自动；
边缘顶部：75px；
}
导航ul{
位置：固定；
宽度：100%；
}
李海军{
宽度：18%；
保证金：5px；
填充：0；
列表样式类型：无；
边框左上半径：15px；
边框右上角半径：15px；
边框：5px纯黑；
背景色：黑色；
显示：内联块；
垂直对齐：底部对齐；
}
导航a{
显示：块；
填充：0；
文字装饰：无；
颜色：白色；
文本对齐：居中；
}
李导航：悬停{
边际上限：0px；
高度：100px；
利润上限：-77px；
}
.清楚{
边缘顶部：100px；
}

内容如下

这里有更多的内容

这里的关键是在悬停时添加负边距顶部和一些额外的填充底部。我还为导航指定了一个高度，并将溢出设置为隐藏，但这并不是完全必要的。当然也不是唯一的办法。看看它在起作用。希望这有帮助

nav { 
  height: 58px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  width: 16%;
  margin: 14px 0 0px 14px;
  padding: 0;
  list-style-type: none;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px; 
  border: 5px solid black;
  background-color: black;
  float: left;
}

nav a {
  display: block;
  padding: 0;
  text-decoration: none;
  color: white;
  text-align: center;
} 

nav li:hover {
  margin-top: -10px;
  padding-bottom: 30px; 
}

img {
  width: 100%;
  margin: auto;   
}

---

对不起，我还不太熟悉这个术语。我假设使用css3属性在我的网页顶部创建一个弹出式导航。类似这样的东西，我想通过添加一个悬停效果，使高度更高，它会增长到顶部，就像我喜欢的示例中一样，但它向下扩展，只是向下推我的内容，这就是我遇到的问题。当它在全屏上工作时，在较小的屏幕上有一些位移。是的，这就是我在下面一段中的意思。原始代码也有类似的问题，我只是想解决OP的问题。