鼠标悬停时子菜单未打开

Question

Css hover effect for sub menu is not working and i also have one more problem why i cant directly use ul li tag... when i put #header #menu ul then it's working sub menu is not working on hover i am trying to open a submenu on menu hover but it's not working, any one have idea why that is behaving like that ? submenu also display upon a menu. and submenu should be open in right side of menu on hover.

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

Answer 1

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

#headr #menu ul li:hover ul {

行应该是

#header #menu ul li:hover ul{

鼠标悬停时子菜单未打开

Submenu is not opening on mouse hover

html

css

menu

hover

submenu