<style type="text/css">
  <!--  
  /*  
  Author : Dave Earley  
  Author Url : http://Dave-Earley.com  
  Date : 20th March 2010  
  */  

  /*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">

  /*  
  Author : Dave Earley  
  Author Url : http://Dave-Earley.com  
  Date : 20th March 2010  
  */  
$(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");  
});  
});  
});  
  </script>

<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>