<style type="text/css">  
  /*Start slide out box*/  
  div.box_button {  
  height: 50px;  
  width: 50px;  
  text-align: center;  
  vertical-align: middle;  
  float: left;  
  cursor:help;  
  }  
  div.box_main {  
  height: auto;  
  background-color: #EEE;  
  float: left;  
  border-top-width: thin;  
  border-right-width: thin;  
  border-left-width: thin;  
  border-top-style: solid;  
  border-right-style: solid;  
  border-left-style: solid;  
  border-top-color: #4D4D4D;  
  border-right-color: #4D4D4D;  
  border-left-color: #4D4D4D;  
  }  
  div.box_wrap {  
  width: auto;  
  float: left;  
  clear: both;  
  height: auto;  
  position: absolute;  
  left: -1px;  
  top: 50px;  
  }  
  div.content {  
  padding: 10px;  
  font-size: 14px;  
  font-family: Arial, Helvetica, sans-serif;  
  }  
  /*End slide out box*/  
   
  /*Start drop down menu*/  
  ul#menu, ul#menu ul {  
  list-style-type:none;  
  margin: 0;  
  padding: 0;  
  width: 15em;  
  width: 300px;  
  }  
   
  ul#menu a {  
  display: block;  
  text-decoration: none;  
  }  
  #menu li a img {  
  margin-right: 5px;  
  }  
   
  ul#menu li {  
  width: 300px;  
  }  
   
  ul#menu li a {  
  color: #333;  
  background-color: #eeeeee;  
  font-family: Arial, Helvetica, sans-serif;  
  border-bottom-width: thin;  
  border-bottom-style: solid;  
  border-bottom-color: #333;  
  font-size: 36px;  
  padding-top: 5px;  
  padding-right: 5px;  
  padding-bottom: 5px;  
  padding-left: 5px;  
  }  
  /*End drop down menu*/ 
  </style> 

  <script type="text/javascript">  
  $(document).ready(function() {  
  $(".box_main").hide();  
  $('#menu ul').hide();  
  $('#menu li a').click(function() {  
  $(this).next().slideToggle('normal');  
  });  
  $('#box_link').toggle(  
  function() {  
  $('.box_main').show( function() {  
  $('.box_main').animate({  
  width: '300'  
  }, 500);  
  });  
  $('#box_img').attr("src", "/images/close.png");  
  },  
  function() {  
  $('.box_main').animate({  
  width: "0"  
  }, 500, function() {  
  $('.box_main').hide();  
  $('#box_img').attr("src", "/images/qm.png");  
  });  
  });  
  }); 

<div class="box_wrap"> 
<div class="box_main"> 
<ul id="menu"> 
<li> 
<a href="#"><img src="/images/faq.png" width="32" height="32" border="0" /><span>FAQ</ 
span></a> 
<ul> 
<div class="content"> 
<strong>Q</strong>. What is this? 
<strong>A</strong>. A cool side bar for your website.</p> 
<strong>Q</strong>. How does it work. 
<strong>A</strong>. It uses CSS & jQeuery.</p> 
<strong>Q</strong>. Who made it? 
<strong>A</strong>. Dave Earley did - <a style="font-size:16px; border:none;" 
href="#">Dave Earley.com</a> 
</p> 
</div> 
</ul> 
</li> 
<li> 
<a href="#"><img src="/images/contact.png" width="32" height="32" border="0" />Contact 
Us</a> 
<ul> 
<div class="content"><form id="form1" name="form1" method="post" action=""> 
<label> 
Name 
<input type="text" name="textfield" id="textfield" /> 
Email 
</label> 
<label> 
<input type="text" name="textfield2" id="textfield2" /> 
Message 
<textarea name="textarea" id="textarea" cols="20" rows="3"></textarea> 
</label> 
<label> 
<input type="submit" name="button" id="button" value="Submit" /> 
</label> 
</form> 
</div> 
</ul> 
<a href="#"><img src="/images/about.png" width="32" height="32" border="0" />About Us</ 
a> 
<ul> 
<div class="content"> 
<strong>This is some about text.</strong></p> 
This is some about text. This is some about text. This is some about text. 
This is some about text. This is some about text.</p> 
This is some about text. This is some about text. 
This is some about text. This is some about text. This is some about text. This is some 
about text. </p> 
</div> 
</ul> 
</li> 
<li> 
<a href="#"><img src="/images/links.png" width="32" height="32" border="0" />Useful 
Links</a> 
<ul> 
<li><a style="font-size:18px;" href="#">Yahoo!</a></li> 
<li><a style="font-size:18px;" href="#">Google</a></li> 
<li><a style="font-size:18px;" href="#">Ask.com</a></li> 
<li><a style="font-size:18px;" href="#">Dave Earley's Blog</a></li> 
</ul> 
</li> 
</ul> 
</div> 
<div class="box_button"> 
<a style="display:block;" href="#" id="box_link"> 
<img id="box_img" src="/images/qm.png" width="50" height="50" border="0" /> 
</a> 
</div> 
</div> 
<div style="clear:both;"></div>