Лучше так написать
HTML:
<div class="menu-first">
<span>Пункт 1</span>
<div class="slide">
<div class="menu-first-item">
Подпункт 1
</div>
<div class="menu-first-item">
Подпункт 2
</div>
<div class="menu-first-item">
Подпункт 3
</div>
</div>
</div>
<div class="menu-first">
<span>Пункт 2</span>
<div class="slide">
<div class="menu-first-item">
Подпункт 1
</div>
<div class="menu-first-item">
Подпункт 2
</div>
<div class="menu-first-item">
Подпункт 3
</div>
</div>
</div>
JS:
$(document).ready(function(){
$('.menu-first span').toggle(function() {
$(this).parent().find('.slide').slideDown(1000);
},
function(){
$(this).parent().find('.slide').slideUp(1000);
});
});
CSS:
.menu-first {
background-color: #FF8000;
color: #6B616D;
float:left;
width:10%;
margin-top: 1%;
margin-left: 1%;
padding-left: 2%;
padding-top: 1%;
padding-bottom: 1%;
font-weight: bold;
font-family: Arial;
font-size: 10pt;
cursor: pointer;
}
.slide {
background-color: #FF8000;
color: #6B616D;
display:none;
padding-left: 2%;
padding-top: 1%;
padding-bottom: 1%;
font-weight: bold;
font-family: Arial;
font-size: 10pt;
}