Simple CSS Example

View the article at http://ryanflorence.com/css-transition

HTML

<ul id="main">
    <li>
        <a href="#">One</a>
        <ul id="sub">
            <li><a href="#">1.1</a></li>
            <li><a href="#">1.2</a></li>
            <li><a href="#">1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
</ul>

CSS

li {
    font-size: 20px;
    padding: 10px 20px;
 
}

#main {
  
  position:relative;
  top:32px;
  
}

#sub {
  
  position:absolute;
  top:-32px;
  left:20%;
  display: flex;
}