导航栏弹出窗口根本不出现

debugcn 发表于 Dev

莱尔·格拉斯

我试图创建这个导航栏，只要我将鼠标悬停在它上面，它就会从菜单中弹出一个选项列表，“我认为”我搞砸了一点，因为弹出菜单根本没有出现我将鼠标悬停在它上面。

<!DOCTYPE HTML>
<html>

<head>
  <title>Test Popup + Navbar</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    
    .navibar {
      list-style-type: none;
      overflow: hidden;
      margin: 0;
      position: fixed;
      background-color: #333333;
      width: 100%;
      top: 0;
      left: 0;
    }
    
    .navibar li {
      float: left;
    }
    
    .navibar li .bar {
      color: white;
      padding: 10px;
      text-decoration: none;
      display: inline-block;
      text-align: center;
      position: relative;
      width: 100px;
      height: 40px;
    }
    
    .navibar li div.dropdown {
      display: none;
      width: 200px;
      position: absolute;
      overflow: hidden;
      z-index: 1;
    }
    
    .dropdown a {
      background-color: #aaaaaa;
      color: black;
      text-decoration: none;
      text-align: center;
      display: block;
      position: relative;
    }
    
    .navibar li .bar:hover {
      background-color: #777777;
      color: black;
    }
    
    .dropdown a:hover {
      background-color: #cccccc;
    }
    
    .navibar li a.menu:hover div.dropdown {
      display: block;
    }
  </style>
</head>

<body>
  <ul class="navibar">
    <li><a href="javascript:void(0)" class="bar menu">Menu <span class="arrowdown">&bigtriangledown;</span></a>
      <div class="dropdown">
        <a href="#link" class="active">Home</a>
        <a href="#link">History</a>
        <a href="#link">Archives</a>
      </div>
    </li>
    <li><a href="#link" class="bar">About</a></li>
  </ul>
</body>

</html>

达瓦尔潘查尔

给你：使用这个 CSS

* {
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

 .navibar {
   list-style-type: none;
   margin: 0;
   position: fixed;
   background-color: #333333;
   width: 100%;
   top: 0;
   left: 0;
 }

 .navibar li {
   float: left;
 }

 .navibar li .bar {
   color: white;
   padding: 10px;
   text-decoration: none;
   display: inline-block;
   text-align: center;
   position: relative;
   width: 100px;
   height: 40px;
 }

 .navibar li div.dropdown {
   display: none;
   width: 200px;
   position: absolute;
   overflow: hidden;
   z-index: 1;
 }

 .dropdown a {
   background-color: #aaaaaa;
   color: black;
   text-decoration: none;
   text-align: center;
   display: block;
   position: relative;
 }

 .navibar li .bar:hover {
   background-color: #777777;
   color: black;
 }

 .dropdown a:hover {
   background-color: #cccccc;
 }

 .navibar li:hover div.dropdown {
   display: block;
 }

我删除了 navibar 类的溢出属性，并将鼠标悬停在 li 上而不是锚标签上

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。