JSFiddle - React, Tailwind, and code Playground

HTML

<!-- cabeçalho do blog -->
<div class="cabecalho">
  <div class="containter">
    <a href="http://madlyluv.com/extras/demos">
        		<img src="http://placehold.it/1200x270/FFF9F2/F5D5AD&amp;text=imagem+cabeçalho+padrão+(1200x270)">
    </a>
  </div>
</div>
<!-- fim cabeçalho do blog -->

<!-- menu-topo --> 
<div class="menu-topo">
  <div class="container">
    <!-- navegacao -->
    <nav class="navegacao">

      <!-- menu visivel para desktop -->
      <div class=""><ul><li class="page_item page-item-2"><a href="http://madlyluv.com/extras/demos/?page_id=2">Página de Exemplo</a></li></ul></div>

      <!-- menu visivel para celulares e tablets -->
      <div class="menu-responsivo">
        <select name="" class="form-control" id="">
          <option value=""></option>
        </select>
      </div>

    </nav>
    <!-- fim navegação -->
  </div>
</div>
<!-- fim menu-topo -->

CSS

/**************************** MENU***************************/

/*menu topo*/
.menu-topo {width: 100%; height: 50px; background: #B0D6C9; -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.05); box-shadow: inset 0 -2px 5px rgba(0,0,0,.05);}

/*navegacao de topo*/
nav.navegacao ul {float: left; margin: 0; padding: 0; list-style: none;}

/*lista de menu*/
nav.navegacao ul li {position: relative; display: inline-block; margin: 0;     padding:0;  color: #fff;}
nav.navegacao ul li a {color: #fff; line-height: 50px; text-decoration: none; padding: 0 14px; text-transform: uppercase; font-weight: bold;}

/*quando o item menu está ativo ou no hover*/
nav.navegacao ul li:hover,
nav.navegacao ul li.current-menu-item, 
nav.navegacao ul li.current_page_parent {background: rgba(255, 255, 255, 0.57);}

nav.navegacao ul li:hover a,
nav.navegacao ul li.current-menu-item a, 
nav.navegacao ul li.current_page_parent a {color: #85C3AE; }

nav.navegacao ul li:hover:after,
nav.navegacao ul li.current-menu-item:after, 
nav.navegacao ul li.current_page_parent:after {color: #fff; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; margin-left: -5px; vertical-align: middle; content: " "; border-right: 5px solid transparent; border-bottom: 5px solid; border-left: 5px solid transparent;}

/*menu responsivo*/
.menu-responsivo {width: 100%; margin: 8px auto 0; 
 display: none; /*determina que será invisivel de inicio*/
}
/**************************** MENU***************************/


.cabecalho {
    width: 100%;
    margin: 20px 0 50px;
}
.cabecalho a {
    display: block;
}
.cabecalho a img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    text-align: center;
}