<style>  
  /* Styles for Example #1 */  
  #example1{  
  margin:0;  
  padding:0;  
  width:200px;  
  list-style-type:none;  
  line-height:120%;  
  }  
  #example1 .closed{  
  background-image:url(/images/ha-down.gif);  
  }  
  #example1 .closed,#example1 .opened{  
  padding-right:10px;  
  background-position:98% 50%;  
  background-repeat:no-repeat;  
  }  
  #example1 .header{  
  background-color:#7B7B7B;  
  }  
  #example1 .opened{  
  background-image:url(/images/ha-up.gif);  
  }  
  #example1 a{  
  display:block;  
  font-weight:bold;  
  text-decoration:none;  
  }  
  #example1 a.hover{  
  border-top:1px solid #5F5F5F;  
  border-bottom:1px solid #7B7B7B;  
  background-color:#7B7B7B;  
  color:#FFFFFF;  
  }  
  #example1 ul{  
  overflow: hidden;  
  margin:0;  
  padding:0;  
  }  
  #example1 li{  
  margin:0;  
  padding:0;  
  list-style-type:none;  
  background-color:#848484;  
  color:#FFFFFF;  
  }  
  #example1 li a{  
  padding:2px 10px 2px 4px;  
  border-top:1px solid #9A9A9A;  
  border-left:1px solid #9A9A9A;  
  border-right:1px solid #696969;  
  border-bottom:1px solid #757575;  
  background-color:#848484;  
  color:#FFFFFF;  
  }  
  #example1 li.active a,#example1 li li.active a{  
  border-top:1px solid #5F5F5F;  
  border-bottom:1px solid #7B7B7B;  
  border-left:1px solid #757575;  
  border-right:1px solid #9A9A9A;  
  background-color:#404040;  
  color:#FFFFFF;  
  }  
  #example1 li.active li a,#example1 li li a{  
  padding:2px 4px 2px 8px;  
  border-top:1px solid #696969;  
  border-left:1px solid #696969;  
  border-right:1px solid #8A8A8A;  
  border-bottom:1px solid #7B7B7B;  
  background-color:#757575;  
  color:#FFFFFF;  
  }  
  </style>  

  <script type="text/javascript" src="/js/jquery.hoveraccordion.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){  
// Setup HoverAccordion for Example 1  
$('#example1').hoverAccordion();  
  });
  </script>

<ul id="example1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="index.php?id=2a#ex1">Subitem 2a</a></li>
<li><a href="index.php?id=2b#ex1">Subitem 2b</a></li>

<li><a href="index.php?id=2c#ex1">Subitem 2c</a></li>
<li><a href="index.php?id=2d#ex1">Subitem 2d</a></li>
<li><a href="index.php?id=2e#ex1">Subitem 2e</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>

<li><a href="#">Item 5</a>
<ul>
<li><a href="index.php?id=5a#ex1">Subitem 5a</a></li>
<li><a href="index.php?id=5b#ex1">Subitem 5b</a></li>
<li><a href="index.php?id=5c#ex1">Subitem 5c</a></li>
</ul>
</li>

<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a>
<ul>
<li><a href="index.php?id=7a#ex1">Subitem 7a</a></li>
<li><a href="index.php?id=7b#ex1">Subitem 7b</a></li>
<li><a href="index.php?id=7c#ex1">Subitem 7c</a></li>

<li><a href="index.php?id=7d#ex1">Subitem 7d</a></li>
</ul>
</li>
<li><a href="#">Item 8</a>
<ul>
<li><a href="index.php?id=8a#ex1">Subitem 8a</a></li>
<li><a href="index.php?id=8b#ex1">Subitem 8b</a></li>

<li><a href="index.php?id=8c#ex1">Subitem 8c</a></li>
<li><a href="index.php?id=8d#ex1">Subitem 8d</a></li>
<li><a href="index.php?id=8e#ex1">Subitem 8e</a></li>
<li><a href="index.php?id=8f#ex1">Subitem 8f</a></li>
</ul>
</li>
<li><a href="#">Item 9</a>

<ul>
<li><a href="index.php?id=9a#ex1">Subitem 9a</a></li>
<li><a href="index.php?id=9b#ex1">Subitem 9b</a></li>
<li><a href="index.php?id=9c#ex1">Subitem 9c</a></li>
<li><a href="index.php?id=9d#ex1">Subitem 9d</a></li>
<li><a href="index.php?id=9e#ex1">Subitem 9e</a></li>

</ul>
</li>
</ul>