CodePen

HTML

            
              <div class="container">
<div id="sidebar">
  <ul id="menu-gerenciador" class="menu">
    <li><a href="#"><span class="title">Home</span></a></li>
		<li><a href="javascript:;"><span class="title">Item 01</span></a>
	    <ul>
				<li><a href="#">Sub Item 01</a></li>
				<li><a href="#">Sub Item 01</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><span class="title">Item 02</span></a>
			<ul>
				<li><a href="#">Sub Item 02</a></li>
				<li><a href="#">Sub Item 02</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><span class="title">Item 03</span></a>
			<ul>
				<li><a href="#">Sub Item 03</a></li>
				<li><a href="#">Sub Item 03</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><span class="title">Item 04</span></a>
			<ul>
				<li><a href="#">Sub Item 04</a></li>
				<li><a href="#">Sub Item 04</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><span class="title">Item 05</span></a>
			<ul>
				<li><a href="#">Sub Item 05</a></li>
				<li><a href="#">Sub Item 05</a></li>
		  </ul>
		</li>
		<li><a href="javascript:;"><span class="title">Item 06</span></a>
			<ul>
				<li><a href="#">Sub Item 06</a></li>
				<li><a href="#">Sub Item 06</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><span class="title">Item 07</span></a>
			<ul>
				<li><a href="#">Sub Item 07</a></li>
				<li><a href="#">Sub Item 07</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><span class="title">Item 08</span></a>
			<ul>
				<li><a href="#">Sub Item 08</a></li>
				<li><a href="#">Sub Item 08</a></li>
			</ul>
		</li>
				<li>
					<a href="javascript:;">
					<span class="title">Item 09</span>
					</a>
					<ul>
						<li><a href="#">Sub Item 09</a></li>
						<li><a href="#">Sub Item 09</a></li>
					</ul>
				</li>
				<li class="start active ">
					<a href="javascript:;">
					<span class="title">Item 10</span>
					</a>
					<ul>
						<li><a href="#">Sub Item 01</a></li>
						<li><a href="#">Sub Item 02</a></li>
						<li><a href="#">Sub Item 03</a></li>
						<li><a href="#">Sub Item 04</a></li>
						<li><a href="#">Sub Item 05</a></li>
						<li><a href="#">Sub Item 06</a></li>
						<li><a href="#">Sub Item 07</a></li>
						<li><a href="#">Sub Item 08</a></li>
						<li><a href="#">Sub Item 09</a></li>
						<li><a href="#">Sub Item 10</a></li>
						<li><a href="#">Sub Item 11</a></li>
						<li><a href="#">Sub Item 12</a></li>
					</ul>
				</li>
				<li>
					<a href="#">
					<span class="title">Item 11</span>
					</a>
				</li>
			</ul>   
</div>

<div id="content">

content 100% here..

</div>
</div>
            
          
!

CSS

            
              *{
  margin: 0;
  padding: 0;
}

body, html{
  height: 100%;
}

.container{
  display: table;
  height: 100%;
  width: 100%;
}

#sidebar, #content {
  display: table-cell;
  height: 100%; 
}

#sidebar {
  width: 255px; 
  background: #333; 
  border-right:#000 solid 3px; 
}

#content {
  /*
  left: 258px;
  right: 0;
  */
  background: #0F0; 
  padding: 10px;
}

.menu i {
  color: #999;
  margin-right: 5px;
  font-weight: normal;
  font-size: 13px;
}

ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: auto !important;
}

ul.menu a {
  display: block;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;	
}

ul.menu li {
  margin-top: 1px;
  line-height: 25px;
}

ul.menu li a {
  background: #666;
  color: #fff;	
  padding: 0.5em;  
}

ul.menu li a:hover {
  background: #000;
}

ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #FF0000 solid;
  padding-left: 15px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function initMenus() {
	$('ul.menu ul').hide();
	$.each($('ul.menu'), function(){
		$('#' + this.id + '.expandfirst ul:first').show();
	});
	$('ul.menu li a').click(
		function() {
			var checkElement = $(this).next();
			var parent = this.parentNode.parentNode.id;

			if($('#' + parent).hasClass('noaccordion')) {
				$(this).next().slideToggle('normal');
				return false;
			}
			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if($('#' + parent).hasClass('collapsible')) {
					$('#' + parent + ' ul:visible').slideUp('normal');
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				$('#' + parent + ' ul:visible').slideUp('normal');
				checkElement.slideDown('normal');
				return false;
			}
		}
	);
}
$(document).ready(function() {initMenus();});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................