Gdtyjr

* 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 uldisplay: none;
#nav li:hover ul display: block; cursor:pointer;
#nav li:hover ul libackground: #333;
#nav li:hover ul li a color:ccc;
#nav li:hover ul li a:hoverbackground: #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 inputdisplay: none;
#nav li:hover ul libackground: #333;
#nav li:hover ul li a color:ccc;
#nav li:hover ul li a:hoverbackground: #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>