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

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

html css

Html 如何从导航栏中的链接创建下拉菜单,html,css,Html,Css,我试图创建一个下拉菜单，当鼠标悬停在导航栏上时，它会从链接中下拉。我不知道如何在下拉列表中隐藏链接列表，然后在正确的链接悬停时让它们出现。任何帮助都将不胜感激到目前为止我的HTML <!DOCTYPE html> <html> <head> <title>Dropdown Menu</title> <link rel="stylesheet" type="text/css" href="main.css">

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

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

尝试使用以下方法：

ul{
填充：0；
列表样式：无；
背景：绿色；
}
ulli{
显示：内联块；
位置：相对位置；
线高：21px；
文本对齐：左对齐；
}
ullia{
显示：块；
填充：8px 25px；
颜色：#fff；
文字装饰：无；
}
悬停{
颜色：#fff；
背景：#000；
}
ul li ul.下拉列表{
最小宽度：100%；/*设置下拉列表的宽度*/
背景：绿色；
显示：无；
位置：绝对位置；
z指数：999；
左：0；
}
ul li：悬停ul.下拉列表{
显示：块；/*显示下拉列表*/
}
ul li ul.下拉列表li{
显示：block；}

一般的想法是为主导航元素的悬停事件分配一个CSS类，以便在导航元素悬停且该导航元素具有嵌套菜单时，在悬停时显示嵌套菜单

这里是一个工作演示

*{margin:0；padding:0；}
身体{
保证金：0；
}
导航{
背景颜色：绿色；
}
a{
文字装饰：无；
颜色：白色；
显示：块；
}
保险商实验室{
列表样式：无；
文本对齐：居中；
}
李{
显示：内联块；
右边填充：10px；
位置：相对位置；
}
a:悬停{
颜色：黄色；
}
.下拉列表{
显示：无；
}
李：悬停，下拉{
显示：块；
位置：绝对位置；
}
乌拉{
颜色：绿色；
}


下拉选单

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