Question

我正在做一些工作来为一个县建立一个新网站，这些下拉菜单给我带来了很多麻烦。尽管我遇到的问题与标题特别相关，但我正在使用必须为县使用自定义主题的代码才能与Wordpress一起使用。

问题：我创建了三个下拉菜单，分别来自“部门”，“服务”和“我如何”。但是，将鼠标悬停在其中一个菜单上时，所有三个菜单似乎合并为一个菜单并相互重叠。同样，菜单不会向下延伸超过导航栏进入主体，而是在导航栏内创建一个滚动选项，我不希望这样做。

我已经将HTML和CSS代码的有效工作块上传到jsfiddle.net，所以我将在此处共享一个链接：https://jsfiddle.net/cameoux/nbe18zav/

不过也可以在这里看看。

<html>
  <body>
    <div class="topnav" style="color: #FFFFFF">
      <img src="<?php echo get_template_directory_uri(); ?>" alt="Image not found!" style="max-width: 100%; display: block;">
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
      <div class="dropdown">
        <a href="#howdoi" class="dropbtn">How Do I</a>
        <div class="dropdown-content">
          <a href="#">Lorem ipsum domat queri?</a>
          <a href="#">Lorem ipsum sumer dokar?</a>
          <a href="#">Lorem escat que poner populusque?</a>
        </div>
        <a href="#services" class="dropbtn">Services</a>
        <div class="dropdown-content">
          <a href="#">Pay Taxes Online</a>
          <a href="#">Voter Registration</a>
          <a href="#">Traffic Map</a>
        </div>
        <a href="#departments" class="dropbtn">Departments</a>
        <div class="dropdown-content">
          <a href="#">Chamber of Commerce</a>
          <a href="#">Health Department</a>
          <a href="#">Clerk's Office</a>
        </div>
      </div>
    </div>
    <div class="icon-bar">
      <a href="" class="facebook"><i class="fa fa-facebook"></i></a>
      <a href="" class="google"><i class="fa fa-google"></i></a>
      <a href="" class="youtube"><i class="fa fa-youtube"></i></a>
      <a href="#" class="contact"><i class="fa fa-phone"></i></a>
    </div>
    <div class="container">

.topnav {
  padding-top: 3rem;
  padding-left: 7rem;
  padding-bottom: 3rem;
  top: 0px;
  left: 0px;
  height: auto;
  position: relative;
  background-color: rgba(0, 15, 93, 0.85);
  font-size: 24pt;
  font-family: 'lato', sans-serif;
  font-weight: normal;
  overflow: auto;
  z-index: 1;
}

.topnav a,
.dropbtn {
  color: white;
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  float: right;
  text-align: center;
  text-decoration: none;
  margin-right: 50px;
  z-index: 1;
}

.topnav a:hover,
.dropdown:hover,
.dropbtn {
  color: rgba(213, 159, 15, 1.0);
  z-index: 1;
}

.dropdown {
  position: relative;
  display: inline-block;
  float: right;
  z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f4f4f4;
  text-align: center;
  font-size: 12pt;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  position: relative;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  z-index: 1;
}

.dropdown-content a:hover {
  background-color: #ddd;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
  z-index: 1;

理想情况下，我希望菜单项垂直排列，以使下拉菜单超出导航栏并进入页面正文，并使菜单保持独立且不重叠。任何帮助或建议，将不胜感激，谢谢！

如何修复导航栏上的悬停下拉菜单？

0 个答案: