侧边菜单中的子菜单

Question

I did a menu in the left side of the screen that it's rotated but when I try to add a sub menu it appears in the top side of the menu and not in the bottom could someone help me?

 ul li{ display:inline; padding: 0.4vw 0.7vw; } nav { grid-area: menu; font-family: Karla; display: block; writing-mode: vertical-lr; transform: rotate(-180deg); }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: absolute; }.dropdown:hover.dropdown-content { display: block; }

 <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="sobre.html">Sobre</a></li> <div class="dropdown"> <li><a href="portfolio.html">Portfólio</a></li> <div class="dropdown-content"> <li><a href="#"> Link1</a></li> </div> </div> <li><a href="website.html">Website</a></li> </ul> </nav>

Answer 1

Check this

 the top side of the menu and not in the bottom could someone help me? ul li{ display:inline; padding: 0.4vw 0.7vw; } nav { grid-area: menu; font-family: Karla; display: block; writing-mode: vertical-lr; transform: rotate(-180deg); }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; position: relative; }.dropdown:hover.dropdown-content { display: block; }

 <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="sobre.html">Sobre</a></li> <div class="dropdown"> <div class="dropdown-content"> <li><a href="#"> Link1</a></li> </div> <li><a href="portfolio.html">Portfólio</a> </li> </div> <li><a href="website.html">Website</a></li> </ul> </nav>

Answer 2

you can add as many submenu items with this

        ul li{
            display:inline;
            padding: 0.4vw 0.7vw;   
        }
        nav {
          grid-area: menu;
          font-family: Karla;
          display: block;
          writing-mode: vertical-rl;
          transform: rotate(-180deg);
        }

        .dropdown {
          position: relative;
          display: inline-block;
        }

        .dropdown-content {
          display: none;
          position: absolute;
          padding-left: 100px
        }

        .dropdown:hover .dropdown-content {
          display: block;
        }

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="sobre.html">Sobre</a></li>
        <div class="dropdown">
          <li><a href="portfolio.html">Portfólio</a></li>
          <div class="dropdown-content">
            <li><a href="#"> Link1</a></li>
            <li><a href="#"> Link1</a></li>
            <li><a href="#"> Link1</a></li>
            <li><a href="#"> Link1</a></li>
            <li><a href="#"> Link1</a></li>
          </div>
        </div>
        <li><a href="website.html">Website</a></li>
      </ul>
    </nav>