<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Вопросы</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<link href="styles/catalog.css" rel="stylesheet" type="text/css" />
<style>
#menu_catalog {
background:#81A192;
width:200px;
list-style-image: url(../img/rect_orange.jpg);
padding:0;
margin:0;
font-size: 10pt;
}
#menu_catalog li {
padding:3px;
margin-left: 20px;
}
#menu_catalog li a{
color:#000;
font-family:verdana,arial,sans-serif;
text-decoration:none;
list-style-type:none;
display: block;
}
.sub_catalog {
padding:0;
margin:0;
list-style-image:none;
margin-left: 5px;
}
.sub_catalog{
display:none;
}
#menu_catalog li.ShoW{
list-style-type:none;
background-color:#A2BFD8;
margin-bottom:2px;
}
.sub_catalog li{
border:0;
color:#fff;
list-style-image: url(../img/catalog_dot.jpg);
margin-left: 15px;
}
</style>
</head>
<body>
<ul id="menu_catalog">
<li><a href="#">Menu 1</a>
<ul class="sub_catalog" >
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li ><a href="#">Menu 2</a>
<ul class="sub_catalog" >
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li ><a href="#">Menu 3</a>
<ul class="sub_catalog" >
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
</ul>
<script>
$(".sub_catalog").parent('li').find("a:first").click(function () {
var ULcng = $(this).next()
ULcng.parent('li').toggleClass('ShoW')
ULcng.toggle('slow')
return false;
});
</script>
</body>
</html>