Html 我的下拉菜单正在运行，但它在导航栏下_Html_Css_Frontend

Html 我的下拉菜单正在运行，但它在导航栏下

html css

Html 我的下拉菜单正在运行，但它在导航栏下,html,css,frontend,Html,Css,Frontend,我的下拉菜单打开了，但它会在屏幕后面下降，就像除非我增加导航栏的高度，否则它是不可见的。这是我的密码。我希望它位于所有内容之上，以便用户能够真正看到它。它位于导航部分下方，因此不可见。子菜单{ 显示：无；页边距顶部：0！重要； } .navbar header.navbar ul.主菜单项.关于美国菜单#关于子菜单{ z指数：100；位置：相对位置； } .navbar header.navbar ul.about us菜单.子菜单{ 宽度：150px； } .导航栏标题.导航栏u

我的下拉菜单打开了，但它会在屏幕后面下降，就像除非我增加导航栏的高度，否则它是不可见的。这是我的密码。我希望它位于所有内容之上，以便用户能够真正看到它。它位于导航部分下方，因此不可见

。子菜单{
显示：无；
页边距顶部：0！重要；
}
.navbar header.navbar ul.主菜单项.关于美国菜单#关于子菜单{
z指数：100；
位置：相对位置；
}
.navbar header.navbar ul.about us菜单.子菜单{
宽度：150px；
}
.导航栏标题.导航栏ul.关于美国菜单.子菜单ul li a{
填充顶部：10px；
左侧填充：0；
右边填充：0；
填充底部：0；
}
.子菜单ul li{
利润率：15px；
宽度：120px；
位置：相对位置；
/*填充：15px*/
}
.navbar标题.navbar ul.课程子菜单：悬停。子菜单ul li a{
宽度：150px；
边距：0！重要；
填充顶部：10px；
左侧填充：0；
右边填充：0；
填充底部：0；
}
.navbar header.navbar ul.about us菜单.子菜单{
宽度：180px；
}
.navbar标题ul li：悬停子菜单{
显示：块！重要；
位置：绝对位置；
背景:#333333；
边缘顶部：15px；
}
.子菜单：悬停{
显示：块！重要；
}
.navbar标题ul li：悬停子菜单ul{
显示：块；
/*利润率：10px*/
}
.子菜单ul li：悬停{
显示：块；
背景：#f5f7；
颜色：黑色！重要；
}
.子菜单ul li a{
颜色：#F5F7；
}
.navbar标题ul li：悬停。子菜单ul li{
显示：块！重要；
颜色：黑色；
宽度：150px；
填充：0！重要；
边界半径：0；
文本对齐：居中；
}
.子菜单ul li a：悬停{
颜色：黑色；
}

给你。
查看这些CSS属性以获得所需的结果

.main-menu-items {
  background: none;
  color: Black;
  padding: 12px 26px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}


.dropdown {
  position: relative;
  display: inline-block;
  min-width: 160px;
}

.sub-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.sub-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sub-menu a:hover {background-color: #f1f1f1}

.dropdown:hover .sub-menu {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
}

.nav-wrapper {
  display: block;
}


文件
关于我们
课程

我实际上不明白问题出在哪里以及如何重现。而且我也没看到你说的“导航栏高度”和“导航部分”。你的目标是什么？左侧有一个“始终在顶部的菜单”，右侧有一个可滚动的内容？@ent3 Hey thanx用于响应，所以基本上是这样的，当我在导航栏上盘旋时，理想情况下应该有一个下降，但什么都没有发生，所以我尝试增加导航栏的高度，注意到它在导航栏下面工作，同样，这是完美的工作，因为它是打算，但现在由于某种原因，这是发生。看看这把小提琴，也许这能帮你。我简化了一点你的html/css。我建议您不要在代码中多次定义类。。我还删除了包装列表的div，只是在列表中添加了类本身。我不知道小提琴是否能解决你的问题，但也许你至少能从中得到好处/想法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="navbar-header">
    <div class="nav-wrapper">
      <div class="dropdown">
        <button class="main-menu-items">About Us</button>
        <div class="sub-menu">
          <a href="#">Gallery</a>
          <a href="#">Testimonials</a>
          <a href="#">Blogs</a>
        </div>
      </div>
    </div>
    <div class="nav-wrapper">
      <div class="dropdown">
        <button class="main-menu-items">Courses</button>
        <div class="sub-menu">
          <a href="#">Science</a>
          <a href="#">Physics</a>
          <a href="#">Biology</a>
          <a href="#">Mathematics</a>
          <a href="#">Chemistry</a>
          <a href="#">Business Studies</a>
          <a href="#">Accountancy</a>
          <a href="#">Economics</a>
          <a href="#">Psychology</a>
          <a href="#">SAT/ACT</a>
        </div>
      </div>
    </div>    
  </div>
</body>
</html>