#navContainer {line-height:16px;
	margin: 0;
	padding: 0;
	background-image: url(img/inner/left_menu.jpg);
	background-repeat: repeat-y;
	border: 0;
	text-align: left;
width:205px;

/* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 2px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 2px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 2px; 
  
  

  -moz-box-shadow:    2px 2px 5px 1px #d7d5d5;
  -webkit-box-shadow: 2px 2px 5px 1px #d7d5d5;
  box-shadow:         2px 2px 5px 1px #d7d5d5;
}

 

/*The 'navContainer' will hold the menu. We have declared a width of 220px, set a border and applied the background image. We have also centered the text.*/

 

#navContainer ul{
margin:0;
padding:0;
list-style:none;
}

 

/*Nothing unusual here, set the padding and margin to 0 and get rid of the bullet points.*/


#navContainer ul li {border-bottom:1px solid #e6e6e6;
position:relative;
}

#navContainer ul li:last-child{border-bottom:0px;padding-bottom:10px;}
 #navContainer ul li:first-child{padding-top:10px;}

/*This piece of code is important. By setting the list item to relative we are telling any child item (which is positioned absolutely) that it will be positioned relative to the position of its parent list item.*/


#navContainer ul li span{
display:block;padding-left:19px;


}

 

/*Change display to 'block', this tells the element to fill all available space and makes the whole button click-able. Set the 'left' image as the background.*/

 

#navContainer ul li a{
	text-decoration: none;
	color: #78787a;
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	padding: 8px;
	padding-left: 10px;
	font-size: 12px;
	background-image: url(img/inner/bullet.png);
	background-repeat: no-repeat;
	background-position: 0px 13px;
}

 

/*Get rid of the underline on our text, change the font color to white & change the font family. Change display to block yet again & set the 'right' image as the background. The two background images should now overlap to create a single image.*/

 

#navContainer ul li span:hover {
background-image: url(img/main/menu-bg.png);
	background-repeat: repeat;
}

 #navContainer ul li.active span{color:#5a90a2;
background-image: url(img/main/menu-bg.png);
	background-repeat: repeat;
}
#navContainer ul li.active a{
	color: #5a90a2;
	
}

/*Following the same process as before apply the background image. Only difference here is that we are using the ':hover' pseudo class(and different images of course).*/

 

#navContainer ul li a:hover{
	color: #5a90a2;
	
}

 

/*Same again, but this time use the 'right' image. When hovering your mouse over the menu the background image should now change.*/


#navContainer ul ul{
position:absolute;
display:none;
}

 

/*Within our parent UL, set the position of any child UL to absolute. Set the display property to 'none'. This hides the drop-down menu, which can be brought back into sight when its parent list item is hovered.*/

#navContainer ul ul li a{
background-image: url(img/inner/left_menu.jpg);
	background-repeat: repeat-y;

  
  

  -moz-box-shadow:    2px 2px 5px 1px #cac9c9;
  -webkit-box-shadow: 2px 2px 5px 1px #cac9c9;
  box-shadow:         2px 2px 5px 1px #cac9c9;
}

 

/*Set a background color for our sub-menu.*/

#navContainer ul li:hover ul{
width:80%;
position:absolute;
display:block; left:204px;
top:0;
}

 

/*This is the important part. When the user hovers their mouse over the list item, the sub-menu section will be moved back into place. We have set a position of 'left:218px', this moves it 218px to the right of its original position. Also, the display property has been set to block. The dropdown list will now be visible while it, or its parent list item is hovered.*/