После /head на страницах, где будет отображаться данное меню, вставляйте:

<style>   
   /* Styles for Example #2 */   
   #example2{   
   margin:0;   
   padding:0;   
   width:300px;   
   list-style-type:none;   
   background-color:#FFFFFF;   
   color:#000000;   
   line-height:120%;   
   height:300px;   
   }   
   #example2 a{   
   display:block;   
   font-weight:normal;   
   text-decoration:none;   
   }   
   #example2 ul{   
   overflow: hidden;   
   margin:0;   
   padding:0;   
   }   
   #example2 li{   
   margin:0;   
   padding:0;   
   list-style-type:none;   
   }   
   #example2 li a{   
   width:285px;   
   padding:5px 0 0 15px;   
   display:block;   
   color:#000000;   
   background-image:url(/images/ha-header.jpg);   
   height:25px;   
   }   
   #example2 li a.closed{   
   color:#000000 !important;   
   background-image:url(/images/ha-header.jpg) !important;   
   }   
   #example2 li.firstitem a.closed{   
   color:#000000 !important;   
   background-image:url(/images/ha-header-first.jpg) !important;   
   }   
   #example2 li.lastitem a.closed{   
   color:#000000 !important;   
   background-image:url(/images/ha-header-last.jpg) !important;   
   }   
   #example2 li li{   
   border-left:1px solid #E5E5E5;   
   border-right:1px solid #E5E5E5;   
   padding:0 15px 0 15px;   
   height:175px;   
   }   
   #example2 li a.opened{   
   background-image:url(/images/ha-header-active.jpg);   
   color:#FFFFFF;   
   }   
   #example2 li.firstitem a.opened{   
   background-image:url(/images/ha-header-first-active.jpg);   
   color:#FFFFFF;   
   }   
   #example2 li.lastitem li{   
   margin-bottom:-4px;   
   }   
   #example2 li.lastitem ul{   
   background-image:url(/images/ha-footer.jpg);   
   background-repeat:no-repeat;   
   background-position:bottom;   
   padding-bottom:4px;   
   }   
   </style>   
   <script type="text/javascript" src="/js/jquery.hoveraccordion.min.js"></script>     
   <script type="text/javascript">     
   $(document).ready(function(){   
    // Setup HoverAccordion for Example 2 with some custom options   
    $('#example2').hoverAccordion({   
    activateitem: '1',   
    speed: 'fast'   
    });   
    $('#example2').children('li:first').addClass('firstitem');   
    $('#example2').children('li:last').addClass('lastitem');   
   });   
   </script>

<ul id="example2">     
    <li><a href="#">Item 1</a>     
    <ul>     
         
    <li>Content #1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr,   
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam   
    erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing   
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   
    aliquyam erat, sed diam voluptua.</li>     
    </ul>     
    </li>     
    <li><a href="#">Item 2</a>     
    <ul>     
    <li>Content #2 - At vero eos et accusam et justo duo dolores et ea rebum.   
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum   
    dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.   
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum   
    dolor sit amet.</li>     
    </ul>     
         
    </li>     
    <li><a href="#">Item 3</a>     
    <ul>     
    <li>Content #3 - Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed   
diam voluptua.</li>     
    </ul>     
    </li>     
    <li><a href="#">Item 4</a>     
         
    <ul>     
    <li>Content #4 - Vet clita kasd gubergren, no sea takimata sanctus est   
    Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores   
    et ea rebum. Vet clita kasd gubergren, no sea takimata sanctus est   
    Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores   
    et ea rebum.</li>     
    </ul>     
    </li>     
    </ul>