Question

我制作了一个带下拉列表的导航栏，并且工作正常，直到我添加了＆＃34;位置：固定;＆＃34; css文件中的语句。一旦我这样做，当鼠标悬停在指定按钮上或从屏幕上移出时，下拉列表不会出现。请注意，父按钮会对颜色变化方面的鼠标悬停做出反应，这就是为什么我认为下拉菜单会在屏幕上显示。

编辑：我意识到下拉列表出现在ul元素中，我可以在其中滚动查看列表。它不会显示为页面上内容的实际下拉列表，而是显示在导航栏本身内。

这是我的代码：

＆＃13;

ul.navbar {
  overflow-x: hidden;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #ffb90f;
  width: 100%;
  display: block;
  vertical-align: middle;
  height: 48px;
  position: fixed;
  top: 0;
}

.navbar li {
  display: inline-block;
  overflow: hidden;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
dropdown:hover .dropbtn {
  background-color: #FFC63D;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF3D5;
  min-width: 160px;
  box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: 8.7%;
}

.dropdown-content a {
  color: #FFBE1E;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ffb90f;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<body>

  <ul class="navbar">
    <li id="navbar" style=" margin-left: 3%; width:22%"><a href="homepage.php" class="dropbtn">Home</a></li>
    <li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
    <li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right">
      <a href="javascript:void(0)" class="dropbtn">Jump to...</a>
      <div class="dropdown-content">
        <a href="#">Item1</a>
        <a href="#">Item2</a>
      </div>
    </li>


  </ul>

</body>

＆＃13;

Answer 1

更新css并从您的css中移除overflow到属性ul.navbar并添加position:relative并将width:21%;移至html下方

<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">

css part

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF3D5;
  min-width: 160px;
  box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: 8.7%;
  left:0px; /* Add this you can change it as your need */
}

工作小提琴

<强> fiddle

＆＃13;

ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #ffb90f;
  width: 100%;
  display: block;
  vertical-align: middle;
  height: auto;
  position: fixed;
  top: 0;
}

.navbar li {
  display: inline-block;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
dropdown:hover .dropbtn {
  background-color: #FFC63D;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF3D5;
  min-width: 160px;
  box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: 8.7%;
  left:0px;
}

.dropdown-content a {
  color: #FFBE1E;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ffb90f;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<ul class="navbar">
  <li id="navbar" style=" margin-left: 3%; width:22%"><a href="homepage.php" class="dropbtn">Home</a></li>
  <li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
  <li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">
    <a href="javascript:void(0)" class="dropbtn">Jump to...</a>
    <div class="dropdown-content">
      <a href="#">Item1</a>
      <a href="#">Item2</a>
    </div>
  </li>
</ul>

＆＃13;

Answer 2

从overflow

中删除.navbar

ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #ffb90f;
  width: 100%;
  display: block;
  vertical-align: middle;
  height: 48px;
  position: fixed;
  top: 0;
}

.navbar li {
  display: inline-block;
  overflow: hidden;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
dropdown:hover .dropbtn {
  background-color: #FFC63D;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF3D5;
  min-width: 160px;
  box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: 8.7%;
}

.dropdown-content a {
  color: #FFBE1E;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ffb90f;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<body>

  <ul class="navbar">
    <li id="navbar" style=" margin-left: 3%; width:22%"><a href="homepage.php" class="dropbtn">Home</a></li>
    <li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
    <li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right">
      <a href="javascript:void(0)" class="dropbtn">Jump to...</a>
      <div class="dropdown-content">
        <a href="#">Item1</a>
        <a href="#">Item2</a>
      </div>
    </li>


  </ul>

</body>

导航栏在css文件中给出固定位置后的奇怪行为

2 个答案: