个人中心
gpt4 book ai didi

html - 如何从导航栏中的链接创建下拉菜单

转载 作者：行者123 更新时间：2023-11-28 04:35:09 26 4
gpt4 key购买 nike

我正在尝试创建一个下拉菜单，当悬停在导航栏上时，该菜单会从导航栏中的链接下拉。我不确定如何隐藏下拉列表中的链接列表，然后在将鼠标悬停在正确的链接上时让它们出现。任何帮助将不胜感激。

到目前为止我的 HTML

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Menu</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li>
                <a href="#">Products</a> <!-- link that creates dropdown menu -->
                <ul class="dropdown">    <!-- dropdown menu list -->
                    <li><a href="#">Engineering</a></li>
                    <li><a href="#">Technical</a></li>
                    <li><a href="#">Other</a></li>
                </ul>
            </li>
            <li><a href="#">Something</a></li>
            <li><a href="#">Last</a></li>
        </ul>
    </nav>
</body>
</html>

到目前为止我的 CSS

body {
    margin: 0;
}
nav {
    background-color: green;
}

a {
    text-decoration: none;
    color: white;
}

ul {
    list-style: none;
    text-align: center;
}

li {
    display: inline-block;
    padding-right: 10px;
}

a:hover {
    color: yellow;
}

.dropdown {
    display: none;
}

最佳答案

总体思路是为主要导航元素的悬停事件分配一个 CSS 类，这样如果悬停导航元素并且该导航元素具有嵌套菜单，则在悬停时显示嵌套菜单。

这是一个工作演示。

* {margin:0;padding:0;}
body {
    margin: 0;
}
nav {
    background-color: green;
}

a {
    text-decoration: none;
    color: white;
  display: block;
}

ul {
    list-style: none;
    text-align: center;
}

li {
    display: inline-block;
    padding-right: 10px;
  position: relative;
}

a:hover {
    color: yellow;
}

.dropdown {
    display: none;
}

li:hover .dropdown {
  display: block;
  position: absolute;
}

ul ul a {
  color: green;
}
<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Menu</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li>
                <a href="#">Products</a> <!-- link that creates dropdown menu -->
                <ul class="dropdown">    <!-- dropdown menu list -->
                    <li><a href="#">Engineering</a></li>
                    <li><a href="#">Technical</a></li>
                    <li><a href="#">Other</a></li>
                </ul>
            </li>
            <li><a href="#">Something</a></li>
            <li><a href="#">Last</a></li>
        </ul>
    </nav>
</body>
</html>

关于html - 如何从导航栏中的链接创建下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41525983/

26 4 0
文章推荐： CSS Flip 过渡效果 - 绝对定位打破响应
文章推荐： javascript - 忽略 git 预提交期间的 eslint 错误
文章推荐： c++ - 如何获取QGraphicsWidget的位置坐标？
文章推荐： c++ - C++ 中的 Hackerrank 阶梯