JSFiddle - React, Tailwind, and code Playground

by wilnet

HTML

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">O que Fazemos?</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Hospedagem</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Sistemas</a></li>
      </ul>
    </li>
 
    <li><a href="#">Contato</a></li>
  </ul>

CSS

ul {margin: 0;padding: 0;list-style: none;width: 150px;border-right:1px solid black;border-top:1px solid white;}ul li {position: relative;}li ul {position: absolute;left: 149px;top: 0;display: none;}ul li a {display: block;text-decoration: none;color: #fff;background:rgba(0,79,152,0.9);padding: 5px;border: 1px solid #fff;}li a:hover{background:rgb(0,79,152);}li:hover ul { display: block; }