鼠标悬停时未打开子菜单答案

【问题标题】：Submenu is not opening on mouse hover鼠标悬停时未打开子菜单
【发布时间】：2021-02-20 11:19:06
【问题描述】：

子菜单的 CSS 悬停效果不起作用 我还有一个问题，为什么我不能直接使用 ul li 标签...当我输入 #header #menu ul 时，它就可以工作了 子菜单在悬停时不起作用 我试图在菜单悬停时打开一个子菜单，但它不起作用，有人知道为什么会这样吗？子菜单也显示在菜单上。并且子菜单应该在悬停时在菜单右侧打开。

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

#header {
    border: 2px solid black;
    display: flex;
    height: 50px;
}

#logo {
    border: 2px solid red;
    width: 30%;
}

#header {
    margin: 5px;
}

#menu {
    border: 2px solid blue;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#header #menu ul {
    border: 2px solid springgreen;
    list-style: none;
    display: flex;
}

#header #menu ul li {
    padding: 10px;
    margin-right: 5px;
    margin-left: 20px;
    color: slategrey;
    font-weight: bold;
    border: 1px solid pink;
    position: relative;
}


#header #menu ul li:hover {
    color: rgb(51, 61, 199);
}

i {
    margin-left: 5px;
    position: relative;
    top: 2px;
}

#header #menu ul li ul {
    display: none;
}

#headr #menu ul li:hover ul {
    display: grid;
    grid-template-columns: 1fr;
    position: absolute;
    left: 0px;
    top: 30px;
    background-color: white;
}

#hero {
    border: 2px solid tomato;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-image: url(a.jpg);
}

#overl {
    width: 100%;
    height: 100%;
    background-color: rgba(10, 7, 7, 0.479);
}

<html>

<head>
    <script src="https://kit.fontawesome.com/6c49b6f825.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="header">
        <div id="logo"><img src="logo.png" style="position: relative; left: 20px;"></div>
        <div id="menu">
            <ul>
                <li>Home</li>
                <li>Course<i class="fas fa-angle-down"></i>
                    <ul>
                        <li>AI</li>
                        <li>Python</li>
                        <li>IoT</li>
                        <li>Cyber Security</li>
                        <li>React</li>
                        <li>Angular</li>
                    </ul>
                </li>
                <li>Blog</li>
                <li>Q&A</li>
                <li>About Us</li>
                <li>Contact</li>
                <li>Login & Registration</li>
            </ul>
        </div>
    </div>

    <div id="hero">
        <div id="overl">

        </div>
    </div>

</body>

</html>

【问题讨论】：

标签： html css menu hover submenu

【解决方案1】：

您的 css 中几乎没有拼写错误。

#headr #menu ul li:hover ul {

行应该是

#header #menu ul li:hover ul{

【讨论】：