Html 我无法创建导航栏子菜单_Html_Css

Html 我无法创建导航栏子菜单

html css

Html 我无法创建导航栏子菜单,html,css,Html,Css,我正在尝试创建一个导航栏，其中包含4个菜单和第一个菜单的1个子菜单，但是，我无法创建子菜单。这是到目前为止我的代码，我不知道如何使子菜单出现时，我悬停，甚至点击第一个菜单。谢谢 <!DOCTYPE html> <html> <head> <title> Website </title> <link rel="stylesheet" type="text/css" href="css.css"> </head> &

我正在尝试创建一个导航栏，其中包含4个菜单和第一个菜单的1个子菜单，但是，我无法创建子菜单。这是到目前为止我的代码，我不知道如何使子菜单出现时，我悬停，甚至点击第一个菜单。谢谢

<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <nav>
        <ul>
            <li><a class="#" href="#">Menu 1</a></li>
                <ul>
                    <li>Submenu 1</li>
                </ul>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
        </ul>
    </nav>
</body>
</html>

HTML错误：

ul

不是

ul

的有效后代（应该在

li

中）

CSS:将

li

设置为

位置：相对以包含内部接头的位置


CSS（缺少部分）：将子ul
设置为位置：绝对和显示：无

CSS（缺少部分）：打开li:hover
显示：块它是子ul
元素

示例1:
使用显示：无/块显示子菜单

nav-ul{
列表样式类型：无；
保证金：0；
填充：0；
/*溢出：隐藏*/
背景色：#111；
/*边框：实心1px黑色*/
}
李国荣{
/*浮动：左*/
显示：内联块；/*添加“float:left；”的istead*/
垂直对齐：顶部；/*添加*/
位置：相对；/*添加以包含子ul*/
}
导航a{
显示：块；
颜色：白色；
文本对齐：居中；
空白：nowrap；/*添加*/
填充：14px 16px；
文字装饰：无；
}
导航li:hover>a，/*以li:hover为目标，然后将样式更改为a*/
nav a.active{/*合并在一起*/
背景色：#ee8601；
}
/*隐藏子ul*/
纳夫利乌尔{
位置：绝对位置；
显示：无；
}
/*显示子ul*/
李海军：悬停{
显示：块；
}











您可以执行以下操作：
<li><a class="#" href="#">Menu 1</a>
    <ul>
        <li>Submenu 1</li>
    </ul>
</li>

隐藏子菜单，然后在其父菜单悬停时显示它
nav ul li ul {
  display:none;
}

nav ul li:hover ul {
  display:block;
}

但您需要将子菜单ul放在li中，如下所示：
<li><a class="#" href="#">Menu 1</a>
    <ul>
        <li>Submenu 1</li>
    </ul>
</li>



子菜单1



下面是一个工作示例：
您需要在这里为onclick事件使用JS。可能的重复代码只需使用以下代码：