Untitled

<!DOCTYPE html>
<html>
<head> 
    <link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="top-menu">
  <ul>
    <li id="expand"> A
      <ul class="sub-menu">
        <li>Sub a </li>
        <li>Sub b </li>
        <li>Sub c </li>
      </ul>
    </li>
    <li> B </li>
    <li> C </li>
  </ul>
</nav>
</body>
</html>

// Code goes here

/* Styles go here */

.top-menu > ul {
background-color: #78a1bb;
font-size: 150%;
padding-left: 0px;
padding-right: 0px;
}

.top-menu > ul > li{
list-style: none;
display: inline-block;
padding: 5px 124px; 
position: relative;
}

.top-menu > ul > li:hover{
background-color: #d6e2ea;
}

ul.sub-menu{
position: absolute;
width: 290px;
background-color: #d6e2ea;
list-style: none;
padding-left: 0px;
padding-top: 5px;
display: none;
}

ul.sub-menu li {
font-size: 80%;
padding-top: 10px;
padding-left: 25px; 
padding-bottom: 10px;
}

.top-menu li:hover .sub-menu {
display: block;
left: 0px;
}