JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<nav>
    <section>
    <a href = "#">Link 1</a>
        <nav>
            <a href = "#">Link 1.1</a>
            <a href = "#">Link 1.2</a>
            <a href = "#">Link 1.3</a>
        </nav>
    </section>
      <section>
    <a href = "#">Link 2</a>
        <nav>
            <a href = "#">Link 2.1</a>
            <a href = "#">Link 2.2</a>
            <a href = "#">Link 2.3</a>
        </nav>
    </section>
    <a href = "3">Link 3</a>
</nav>

CSS

section {
    width: 80px;
    height: 17px;
    overflow: hidden;
    float: left;
}
section:hover {
    height: 80px;
}