Пример меню http://test.mastertur.ru/
Код css меню
#ojaccord-menu {
width: 220px;
margin:0px;
padding:0px;
margin:auto;
}
div.menu_list {
font-size:12px;
list-style:none;
font-weight:bold;
}
#ojaccord-menu p.menu_head {
cursor: pointer;
position: relative;
background-image:url('i/menu_bg0.gif');
background-position:100% 0;
background-repeat:no-repeat;
color:#26370A;
height:32px;
line-height:32px;
padding:0 0 0 20px;
position:relative;
margin:0px;
}
#ojaccord-menu p.active,
#ojaccord-menu p.active a {
color:#6F3700;
}
#ojaccord-menu p.active:hover,
#ojaccord-menu p.active a:hover {
color:#6F3700;
}
#ojaccord-menu p.menu_head.active:hover,
#ojaccord-menu p.menu_head:hover {
background-position:100% -32px;
}
#ojaccord-menu p.menu_head.active {
background-position:100% -64px;
}
#ojaccord-menu p.menu_head a {
color:#26370A;
text-decoration:none;
display:block;
}
/******* SUB MENU STLE ********/
#ojaccord-menu div.menu_body {
display:none;
border:1px solid #A1C67B;
border-top:0;
border-bottom:0;
}
#ojaccord-menu div.menu_body li {
margin:0;
padding:0;
display:block;
list-style:none;
border-left:10px double #A1C67B;
background:none;
}
#ojaccord-menu div.menu_body li a{
display:block;
color:#000;
text-decoration:none;
padding:2px 0 2px 10px;
border-bottom:1px solid #A1C67B;
font-weight:normal;
}
#ojaccord-menu div.menu_body li a:hover {
background: #d5e5c1;
}
#ojaccord-menu div.menu_body li a.sub_active {
color:#990000;
font-weight:bold;
}
#ojaccord-menu div.menu_body ul {
margin:0;
padding:0;
list-style:none;
}
#ojaccord-menu div.menu_body li ul li {
border-left:0;
padding:0;
}
/* for level 3 */
#ojaccord-menu div.menu_body li ul li a{
padding-left:20px;
}
/*for Level 4 */
#ojaccord-menu div.menu_body li ul li ul li a{
padding-left:30px;
}
/*for Level 5 */
#ojaccord-menu div.menu_body li ul li ul li ul li a{
padding-left:40px;
}
/*for Level 6 */
#ojaccord-menu div.menu_body li ul li ul li ul li ul li a{
padding-left:50px;
}
Определение ф-ции
jQuery(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
jQuery("#secondpanelkjlb p.menu_head").click(function()
{
jQuery(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
//slides the element with class "menu_body" when mouse is over the paragraph
jQuery("#firstpanelkjlb p.menu_head").mouseover(function()
{
jQuery(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
});
});
Само HTML меню
<div id="ojaccord-menu">
<div id="secondpaneejlae" class="menu_list">
<p class="menu_head "><a href="/level1-item1">Level1 item1</a></p>
<div class="menu_body">
<ul>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item1/dummy-item1">Dummy Item1</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item1/dummy-item2">Dummy Item2</a>
<ul>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item1/dummy-item2/dummy-item1">Dummy Item1</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item1/dummy-item2/dummy-item2">Dummy Item2</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item1/dummy-item2/dummy-item3">Dummy Item3</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item1/dummy-item2/dummy-item4">Dummy Item4</a>
</li>
</ul>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item1/dummy-item3">Dummy Item3</a>
</li>
</ul>
</div>
<p class="menu_head ">Level1 item2</p>
<div class="menu_body">
<ul>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item2/dummy-item1">Dummy Item1</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item2/dummy-item2">Dummy Item2</a>
</li>
</ul>
</div>
<p class="menu_head "><a href="http://demo.joomseller.com/level1-item3">Level1 item3</a></p>
<p class="menu_head ">Level1 item4</p>
<div class="menu_body">
<ul>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item4/dummy-item1">Dummy Item1</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item4/dummy-item2">Dummy Item2</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item4/dummy-item3">Dummy Item3</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item4/dummy-item4">Dummy Item4</a>
</li>
</ul>
</div>
<p class="menu_head ">Level1 item5</p>
<div class="menu_body">
<ul>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item5/dummy-item1">Dummy Item1</a>
<ul>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item5/dummy-item1/dummy-item1">Dummy Item1</a>
<ul>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item5/dummy-item1/dummy-item1/dummy-item3">Dummy Item3</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item5/dummy-item1/dummy-item1/dummy-item2">Dummy Item2</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item5/dummy-item2">Dummy Item2</a>
</li>
<li class="oj-accord_li">
<a href="http://demo.joomseller.com/level1-item5/dummy-item3">Dummy Item3</a>
</li>
</ul>
</div>
</div>
</div>