Use the display property of the CSS to control whether the second-level drop-down menu is displayed. When you move the pointer to the LI label of the level-1 menu, the UL label of the level-2 navigation menu is displayed

Note: 1. The hover event of the secondary menu must be written in the parent element to work. In order to prevent banner or content under the navigation bar from overshadowing the secondary menu, the navigation bar needs to be positioned to raise the level of the secondary menu. The parent element is positioned relative to the child element, and the child element is positioned absolutely (the child must not be the parent phase) 3. After positioning, the width of the secondary menu will no longer inherit the width of its parent and will need to be redefined, otherwise it will be stretched out by the content

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        /* Clear the default style */* {margin: 0;
            padding: 0;
            list-style: none;
        }
        /* Sets the parent container style */
        .container{
            width: 380px;
            height: 500px;
            background-color: aliceblue;
            margin: 0 auto;
        }
        /* Select each menu item */
        .container ul li{
            float: left;
            width: 120px;
            height: 36px;
            line-height: 36px;
            background-color: darkcyan;
            text-align: center;
            border: 1px solid white;
            position: relative;   
        }
        /* a label style */
        a{
            color: white;
            text-decoration: none;
        }
        /* The secondary menu is hidden */ by default
        .container ul li ul{
            position: absolute;
            display: none;
        }
        /* Hover effect */ for each level 1 menu
        .container ul li:hover{
            background-color: rgba(0.139.139.0.6);
        }
        /* When the first menu hover, the second menu displays */
        .container ul li:hover ul{
            display: block;
            cursor: pointer;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <! -- Level 1 menu -->
        <ul>
            <li>
                <a href="#">Level 1 Menu 1</a>
                <! -- Level 2 menu -->
                <ul>
                    <li>Level 2 Menu 1</li>
                    <li>Level 2 Menu 2</li>
                    <li>Level 2 Menu 3</li>
                </ul>
            </li>
            <li><a href="#">Level 1 Menu 2</a></li>
            <li><a href="#">Level 1 Menu 3</a></li>
        </ul>
        <p>Under a small bridge near a cottage a stream flows</p>
    </div>
</body>
</html>
Copy the code