Question

基本上，我正在尝试创建一个具有下拉悬停效果的导航栏。现在，我已经创建了导航栏，但是我正在努力做出下拉效果。我希望当用户将鼠标悬停在名为“ Works”的导航栏中的选项卡上时，会显示下拉效果。悬停后，我希望有两个单独的选项卡，用户可以单击这些选项卡来导航。有什么办法吗？这是我的代码。谢谢。

window.addEventListener("scroll", function() {
    var header = document.querySelector("header");
    header.classList.toggle("sticky", window.scrollY > 0);
})

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    min-height: 200vh;
    background-color: #d7a4d9;
}
h3 {
    color: #3F69CA
}
/* Navbar */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.6s;
    padding: 40px 100px;
    z-index: 100000;
    font-family: "Roboto";
}
header.sticky {
    padding: 5px 100px;
    background: #F5F5F5;
    font-family: "Roboto";
}
header .logo {
    position: relative;
    font-weight: 700;
    color: #F5F5F5;
    text-decoration: none;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.6s;
    font-family: "Roboto";
}
header ul {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto";
}
header ul li {
    position: relative;
    list-style: none;
    font-family: "Roboto";
}
header ul li a {
    position: relative;
    margin: 0 15px;
    text-decoration: none;
    color: #F5F5F5;
    letter-spacing: 2px;
    font-weight: 500px;
    transition: 0.6s;
    font-family: "Roboto";
    font-size: 20px;
}
header ul li a:hover {
    text-decoration: underline;
    color: black;
}
header.sticky .logo, header.sticky ul li a {
    color: #000;
    font-family: "Roboto";
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <header>
        <a class="" href="#"></a>
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="gallery.html">Works</a>
            </li>
            <li>
                <a href="contact.html">Contact</a>
            </li>
        </ul>
  </header>
    <script src="script.js"></script>
  </body>
</html>

如何为导航栏构建悬停下拉导航？

0 个答案: