Edit in JSFiddle

nav ul {
    list-style: none;
    height: 20px;
    margin: 10px;
    font-weight: bold;
}

nav ul li {
    float: left;
    padding: 5px 20px;
    background-color: #CFD0D4;
}

nav ul li ul{
    display:none;
    position:absolute;
    margin: 0px;
}

nav ul li:hover > ul{
 display:block;   
}

nav ul li ul li{
    float:none;
}

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Works</a>
            <ul>
                <li><a href="#">Work 1</a></li>
                <li><a href="#">Work 2</a></li>
                <li><a href="#">Work 2</a></li>
            </ul>                            
        </li>
        <li><a href="#">Others</a>
            <ul>
                <li><a href="#">Others 1</a></li>
                <li><a href="#">Others 2</a></li>
                <li><a href="#">Others 2</a></li>
            </ul> 
        </li>
    </ul>
</nav>