Creating a dropdown navigation menu (remastered)

Creating a dropdown navigation menu (remastered)

HTML

<nav>
    <ul>
        <li><a href="#">NavItem1</a></li><li>
        <a href="#">NavItem2</a></li><li>
        <a href="#">DropdownMenu1</a>
            <ul>
                <li><a href="#">DropdownItem1</a></li>
                <li><a href="#">DropdownItem2</a></li>
                <li><a href="#">DropdownItem3</a></li>
            </ul>
        </li><li>
        <a href="#">NavItem3</a></li><li>
        <a href="#">DropdownMenu2</a>
            <ul>
                <li><a href="#">DropdownItem1</a></li>
                <li><a href="#">DropdownItem2</a></li>
                <li><a href="#">DropdownItem3</a></li>
                <li><a href="#">DropdownItem4</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

body{ overflow-y: scroll; margin: 0; padding: 0; font-family: Karla; }

nav{ background-color: #383332; text-align: center; }
nav ul{ list-style-type: none; padding: 0; margin: 0; position: relative; }
nav ul li{ display: inline-block; }
nav ul li:hover{ background-color: #2465F3; }
nav ul li a{ display: block; padding: 15px; color: #FFF; text-decoration: none; }


@import url(https://fonts.googleapis.com/css?family=Karla);