Simple Drop Down menu in CSS

menu.html

.menu {
    padding: 1rem;
    background: orangered;
}
.menu ul {
    list-style: none;
}
.menu ul li {
    display: inline-block;
}
.menu ul li a:hover {
    text-decoration: none;
    color: #fff;
}
.menu ul li ul {
    display: none;
    position: absolute;
    list-style: none;
    background: red;
}
.menu ul ul li {
    display: block;
}
.menu ul li ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px;
}

.menu ul li:hover > ul {
    display: block;
}

 <nav class="menu">
        <ul>
           <li><a href="#">Home</a></li> 
           <li><a href="#">DropDown</a>

                <ul>
                    <li><a href="#">Menu 1</a></li>
                    <li><a href="#">Menu 2</a></li>
                </ul>

           </li>
        </ul>
    </nav>