Question

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

到目前为止我的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;
}

Answer 1

试试这个：

ul{
        padding: 0;
        list-style: none;
        background: green;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #fff;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #000;
    }
    ul li ul.dropdown{
        min-width: 100%; /* Set width of the dropdown */
        background: green;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block;	/* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;}

 <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li>
                <a href="#">Products &#9662;</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>

Answer 2

一般的想法是将CSS类分配给主要nav元素的悬停事件，这样如果导航元素悬停并且nav元素具有嵌套菜单，则在悬停时显示嵌套菜单。

这是一个有效的演示。

＆＃13;

* {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;
}

＆＃13;

<!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>

＆＃13;

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

2 个答案: