JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<nav class="navbar blue">
  <div class="navbar-brand">
    <div class="navbar-burger burger" data-target="navMenubd-example">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navMenubd-example" class="navbar-menu">

      <div class="navbar-start">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link  is-active" href="#">
          <p> Docs </p>
        </a>
        <div class="navbar-dropdown ">
          <a class="navbar-item " href="#"> Overview </a>
          <a class="navbar-item " href="#"> Company 2 </a>
        </div>
      </div>

    </div>

    </div>
      
      </nav>

CSS

.blue {
    background-color:#011627;
  }
  .blue a{
    /*color:white;*/
    /*background-color:white;*/
  }
  
  .navbar-link p{
    color:white;
  }

  .is-white {
    color:white;
  }

  .is-white:hover{
    color:black;
    background-color: blue;
  }
  
  a.navbar-link.is-active {
    background-color:green;
  }
  
/* This changes also the elements below*/
.navbar-item :hover{
    background-color:red !important;
}

/* This changes only the text */
.navbar-link :hover{
    background-color:yellow !important;
}