为什么我的下拉菜单无法正常显示

问题描述 投票：0回答：1

我正在尝试为我的项目获取下拉菜单，但该菜单未显示。 这是 HTML

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body {
  font-weight: 400;
  font-style: normal;
  background: #fff;
  color: #000;
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: #727289;
  text-decoration: none;
}

ul {
  list-style: none;
}

.button {
  cursor: pointer;
  color: #fff;
  background-color: #009DFF;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  transition: 0.3s;
}

.button:hover {
  color: #009DFF;
  background-color: #fff;
  border: #009DFF 1px solid;
}

.button2 {
  cursor: pointer;
  color: #fff;
  height: 42.5px;
  background-color: transparent;
  padding: 9px 24px;
  border: #fff 1px solid;
  border-radius: 5px;
  font-size: 15px;
  transition: 0.3s;
}

.button2:hover {
  background-color: #fff;
  border: none;
  color: #009DFF;
}

.button3 {
  cursor: pointer;
  color: #5DB2FF;
  display: inline-block;
  background-color: transparent;
  border: #5DB2FF 1px solid;
  -webkit-border-radius: 0.5s;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  padding: 9px 24px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.button3:hover {
  color: #fff;
  background-color: #5DB2FF;
  border: none;
}

.container {
  margin-top: 10px;
  width: 90%;
  max-width: 1100px;
  margin-left: 210px;
  margin-right: 210px;
  margin-top: 20px;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 18px 0px;
  font-size: 15px;
  margin-bottom: 25px;
}

.main-nav .logo {
  width: 110px;
}

.main-nav ul {
  display: flex;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}

.main-nav .main-menu .about-drop {
  width: 18px;
  height: 18px;
}

.main-nav .main-menu .dropdown {
  position: relative;
}

.main-nav .main-menu .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: gray;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 200px;
}

.main-nav .main-menu .dropdown-menu li {
  padding: 10px 20px;
}

.main-nav .main-menu .dropdown-menu li a {
  color: #727289;
  text-decoration: none;
  display: block;
}

.main-nav .main-menu .dropdown-menu li a:hover {
  color: #009DFF;
}

.dropdown:hover .dropdown-menu,
.dropdown:active .dropdown-menu {
  display: block;
}

.dropdown-menu {
  display: hidden
}


/* Adjustments for the About Us dropdown icon */

.about-drop {
  margin-left: 5px;
  transition: transform 0.3s;
}

.dropdown:hover .about-drop {
  transform: rotate(180deg);
}

.main-nav ul li {
  position: relative;
}

.main-nav ul li a:hover {
  border-bottom: 2px solid #009DFF;
}

.main-nav ul.main-menu {
  margin-left: 20px;
}

.main-nav ul.main-menu li {
  margin: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/your-path-to-uicons/css/uicons-heart-rate-monitor.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="index.js"></script>
  <title>Internship Project (Documed)</title>
</head>

<body>
  <div class="container">
    <!-- Navbar -->
    <nav class="main-nav">
      <img src="images/logo.png">

      <ul class="main-menu">
        <li><a href="#">HOME</a></li>
        <li class="dropdown">
          <a href="#">ABOUT US <img class="about-drop" src="images/down-arrow.png"></a></li>
        <ul class="dropdown-menu">
          <li><a href="#">What we do</a></li>
          <li><a href="#">Departments</a></li>
          <li><a href="#">Testimonials</a></li>
        </ul>
        </li>
        <li><a href="#">CONTACT US</a></li>
      </ul>

      <ul class="right-button">
        <li>
          <a href="#">
            <button class="button">Make An Appointment</button>
          </a>
        </li>
      </ul>
    </nav>
  </div>

请注意，这只是涉及导航栏和下拉菜单的代码部分。我这样做是为了减少显示的内容量。我还想知道我是否应该使用 JavaScript。

我尝试更改显示和位置，但没有显示。

javascript html css drop-down-menu navbar
1个回答
0
投票

<li class="dropdown">
  <a href="#">ABOUT US <img class="about-drop" src="images/down-arrow.png"></a></li>
<ul class="dropdown-menu">
  <li><a href="#">What we do</a></li>
  <li><a href="#">Departments</a></li>
  <li><a href="#">Testimonials</a></li>
</ul>

此代码应更改为：

<li class="dropdown">
  <a href="#">ABOUT US <img class="about-drop" src="images/down-arrow.png"></a>
  <ul class="dropdown-menu">
    <li><a href="#">What we do</a></li>
    <li><a href="#">Departments</a></li>
    <li><a href="#">Testimonials</a></li>
  </ul>
</li>

将 

.dropdown-menu
设置为 
.dropdown

的子元素
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.