更改导航栏按钮的高度并将其从 (:selected) 更改为 (:hover)

Question

我的导航栏以 :selected 方式运行，这意味着下拉菜单仅在按钮被选中时显示。我想改为悬停，但是当我在 CSS 中调整它时，它没有任何改变。我害怕调整任何其他东西，因为它可能也会把其他东西搞砸。

我还尝试更改按钮的高度，以便在将鼠标悬停在按钮上时底部边框完全适合按钮的底部。然而，当我弄乱高度、悬停和填充时，它没有显示任何效果。

我不确定我的导航栏做错了什么我想我把它弄坏了，我也不确定哪里出错了。

如果能帮我修复我的导航栏，我将不胜感激，或许还能就解决方案的形成提供一些建议。

谢谢！

<!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">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://kit.fontawesome.com/194918e54c.js" crossorigin="anonymous"></script>
  <title>Localhost</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="faq.css">
 
 
</head>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
  <div class="nav-container">
    <div class="brand">
      <img src="photos/ae-header-logo.png" alt="" srcset="">
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li>
          <a href="#!">Home</a>
        </li>
        <li>
          <a href="#!">About</a>
        </li>
        <li>
          <a href="#!">Services</a>
          <ul class="nav-dropdown">
            <li>
              <a href="#!">Web Design</a>
            </li>
            <li>
              <a href="#!">Web Development</a>
            </li>
            <li>
              <a href="#!">Graphic Design</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#!">Pricing</a>
        </li>
        <li>
          <a href="#!">Portfolio</a>
          <ul class="nav-dropdown">
            <li>
              <a href="#!">Web Design</a>
            </li>
            <li>
              <a href="#!">Web Development</a>
            </li>
            <li>
              <a href="#!">Graphic Design</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#!">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</section>

     html,body {
      margin: 0;
      padding: 0;
      height: auto;
      font-family: 'Poppins';
      box-sizing: border-box;
      background-color:  rgb(255, 255, 255) !important;
    
    }
    .navigation {
      height: 120px;
      background-color: green;
      
    }
    .brand {
      position: absolute;
      top: 1%;
      left: 0%;
      float: left;
      text-transform: uppercase;
      font-size: 1.9em;
      
    
    }
    .brand img{
      position: relative;
      margin-top: 0%;
      width: 500px;
      padding-left: 0%;
      
      left: 0%;
      float: left;
      
    
    }
    .brand img:hover{
      box-shadow: 10px;
      transition: all ease-in-out 0.5s;
      
      
    }
    .brand a, .brand a:visited {
      color: #fff;
      text-decoration: none;
      
    
    
    
    }
    
    
    .nav-container {
      max-width: 1000px;
      margin: 0 auto;
      background-color: red;
    }
    nav {
      float: right;
      position: relative;
      left: 20%;
      margin-top: 20px;
      background-color: rgb(255, 0, 212);
    
      
    }
    nav ul {
      list-style: none;
      
      margin: 0;
      padding: 0;
    }
    nav ul li {
      float: left;
      position: relative;
      
    }
    nav ul li a, nav ul li a:visited {
      display: block;
      padding: 0 20px;
      line-height: 100px;
      color: black;
      text-decoration: none;
    }
    nav ul li a:hover, nav ul li a:visited:hover {
      border-bottom: black 2px solid;
    }
    nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
      padding-left: 4px;
      content: ' ▾';
    }
    nav ul li ul li {
      min-width: 190px;
    }
    nav ul li ul li a {
      padding: 15px;
      line-height: 20px;
    }
    .nav-dropdown {
      position: absolute;
      display: none;
      z-index: 1;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    }
    /* Mobile navigation */
    .nav-mobile {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      background: #262626;
      height: 70px;
      width: 70px;
    }
    @media only screen and (max-width: 798px) {
      .nav-mobile {
          display: block;
     }
      nav {
          width: 100%;
          padding: 70px 0 15px;
     }
      nav ul {
          display: none;
     }
      nav ul li {
          float: none;
     }
      nav ul li a {
          padding: 15px;
          line-height: 20px;
     }
      nav ul li ul li a {
          padding-left: 30px;
     }
      .nav-dropdown {
          position: static;
     }
    }
    @media screen and (min-width: 799px) {
      .nav-list {
          display: block !important;
     }
    }
    #nav-toggle {
      position: absolute;
      left: 18px;
      top: 22px;
      cursor: pointer;
      padding: 10px 35px 16px 0px;
    }
    #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
      cursor: pointer;
      border-radius: 1px;
      height: 5px;
      width: 35px;
      background: #fff;
      position: absolute;
      display: block;
      content: '';
      transition: all 300ms ease-in-out;
    }
    #nav-toggle span:before {
      top: -10px;
    }
    #nav-toggle span:after {
      bottom: -10px;
    }
    #nav-toggle.active span {
      background-color: transparent;
    }
    #nav-toggle.active span:before, #nav-toggle.active span:after {
      top: 0;
    }
    #nav-toggle.active span:before {
      transform: rotate(45deg);
    }
    #nav-toggle.active span:after {
      transform: rotate(-45deg);
    }

Answer 1

    .nav-list li:hover ul{
      display: block
    }

希望这就是您要找的东西

更改导航栏按钮的高度并将其从 (:selected) 更改为 (:hover)

Change height of navbar button and change it from (:selected) to (:hover)

html

javascript

css

navbar