Gfrktyl

*{ margin: 0; paddin: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666;}

#nav li a {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555;}

#nav li a:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul{display: none;}

#nav li:hover ul { display: block; cursor:pointer;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

<ul id="nav"> 

  <li><a href="#">Consultores</a>

    <ul>

      <li><a href="#">sub - 1</a></li>

      <li><a href="#">sub - 2</a></li>

      <li><a href="#">sub - 3</a></li>

    </ul>

  </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>

</ul>

*{ margin: 0; padding: 0;}

body {background: ffffff; margin: 5px; }

#nav {margin: 0; padding: 0; }

#nav li {list-style: none; background: #fff; width: 250 px; border-bottom: 1px solid #666; outline: none;}

#nav li a, #nav li label {display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; cursor: pointer;}

#nav li a:hover, #nav li label:hover {border-left:4px solid #069; background: #f8f8f8;}

#nav li ul, #nav li input{display: none;}

#nav li:hover ul li{background: #333;}

#nav li:hover ul li a {color:ccc;}

#nav li:hover ul li a:hover{background: #222; border-left:4px solid #900;}

#nav li input:checked + ul{

   display: block; cursor:pointer;

}

<ul id="nav"> 

   <li>

      <label for="sub1">Consultores</label>

      <input id="sub1" type="checkbox">

      <ul>

         <li><a href="#">sub - 1</a></li>

         <li><a href="#">sub - 2</a></li>

         <li><a href="#">sub - 3</a></li>

      </ul>

   </li>	

  <li><a href="#">Colaboradores</a></li>

  <li><a href="#">Comercial</a></li>

  <li><a href="#">RH</a></li>



</ul>

$(document).ready(function(){



  $('div.dropdown').each(function() {

    var $dropdown = $(this);



    $("a.dropdown-link", $dropdown).click(function(e) {

      e.preventDefault();

      $div = $("div.dropdown-container", $dropdown);

      $div.toggle();

      $("div.dropdown-container").not($div).hide();

      return false;

    });



});

    

  $('html').click(function(){

    $("div.dropdown-container").hide();

  });

     

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="dropdown-1" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-2" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>



<div id="dropdown-3" class="dropdown dropdown-processed">

  <a class="dropdown-link" href="#">Options</a>

  <div class="dropdown-container" style="display: none;">

    <ul>

      <li>Item 1</li>

      <li>Item 2</li>

      <li>Item 3</li>

    </ul>

  </div>

</div>