css 我的下拉菜单不起作用，它看起来就像正常的菜单

我一直在尝试为我的电子商务网站做一个下拉菜单，让用户找到他们最喜欢的类型。
我使用CSS和HTML使下拉菜单工作，但它仍然不工作，下拉菜单的元素似乎是在菜单下，但它就像一个正常的菜单，而不是下拉。
结果截图：

我的JS：

const search = () => {
    const searchbox = document.getElementById("search-item").value.toUpperCase();
    const storeitems = document.getElementById("game-list")
    const product = document.querySelectorAll(".col-4")
    const pname = storeitems.getElementsByTagName("h4")

    for (var i = 0; i < pname.length; i++) {
        let match = product[i].getElementsByTagName('h4')[0];

        if (match) {
            let textvalue = match.textContent || match.innerHTML

            if (textvalue.toUpperCase().indexOf(searchbox) > -1) {
                product[i].style.display = "";
            } else {
                product[i].style.display = "none";
            }
        }
    }
}

/*----------SUB-MENU--------*/
nav ul li:hover{
    background: #000;
    border-radius: 3px;
}
.sub-menu-1{
    display: block;
    position: absolute;
    background-color: var(--color-black);
}
.sub-menu-1 ul{
    display: inline-block;
    margin: 10px;
}
.sub-menu-1 ul li{
    width: 150px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
    <link rel="stylesheet" href="Gamology.css">
    <script src="app.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        </style>
</head>
<body>

    <div class="header">
    <div class="container">
        <div class="navbar">
            <div class="logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Video_game_controller_icon_designed_by_Maico_Amorim.svg/2498px-Video_game_controller_icon_designed_by_Maico_Amorim.svg.png" width="200px">
            </div>
            <nav>
                <ul id="MenuItems">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Games</a></li>
                        <div class="sub-menu-1">
                            <ul>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Shooting</a></li>
                                <li><a href="#">Survival</a></li>
                                <li><a href="#">Indie</a></li>
                            </ul>
                        </div>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Account</a></li>
                </ul>
            </nav>
            <img src="https://cdn-icons-png.flaticon.com/512/263/263142.png" width="30px" height="30px">
            <img src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png" class="menu-icon" onclick="menutoggle()">
        </div>

你需要把你的下拉菜单按钮。我不知道这是不是你想要的。但尝试一下。

.dropbtn {
  color: blue;
  font-size: 16px;
  text-decoration: underline;
  background: transparent;
  outline: none;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

.dropdown:hover .dropdown-content {display: block;}

<nav>
  <ul id="MenuItems">
    <li><a href="#">Home</a></li>
    <li><a href="#">Games</a></li>
    <li>
      <div class="dropdown">
        <button class="dropbtn">Sub-menu items</button>
        <div class="dropdown-content">
          <a href="#">Action</a>
          <a href="#">Shooting</a>
          <a href="#">Survival</a>
          <a href="#">Indie</a>
        </div>
      </div>
    </li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Account</a></li>
  </ul>
</nav>

它的工作时，你悬停它，你可以修改它，如果你想点击行动.

css 我的下拉菜单不起作用，它看起来就像正常的菜单

1条答案

相关问题

热门标签

最新问答