สร้าง drop-down Menu ด้วย jQuery Step-by-Step @see http://devsharing.com/2013/javascript/jquery/create-drop-down-menu-jquery-step-by-step/

1.html

<div class="leftmenu">
</div>

2.html

<ul>
    <li class ="menu" id="programming" >Programming </li>
    <li class ="menu" id="category"    >Web Programming </li>
    <li class ="menu" id="os"          >OS</li>
</ul>  

3.html

<ul>
<!-- Programming -->
  <li class ="menu" id="programming" >Programming </li>
    <ul>
      <li class="submenu"><a href="#" title="Java"        > Java  </a></li>
      <li class="submenu"><a href="#" title="C++"         > C++   </a></li>
      <li class="submenu"><a href="#" title="Objective-C" > Objective-C</a></li>
    </ul> 

<!-- Web Programming -->
  <li class ="menu" id="category" >Web Programming </li>
    <ul>
      <li class="submenu"><a href="#" title="HTML"        > HTML  </a></li>
      <li class="submenu"><a href="#" title="CSS"         > CSS   </a></li>
      <li class="submenu"><a href="#" title="javascript"  > javascript</a></li>
    </ul> 

<!-- OS -->
  <li class ="menu" id="os" >OS</li>
    <ul>
      <li class="submenu"><a href="#" title="Ubuntu"  >Ubuntu   </a></li>       
      <li class="submenu"><a href="#" title="Windows" >Windows  </a></li>    
      <li class="submenu"><a href="#" title="Mac OS"  >Mac OS   </a></li>    
    </ul>
</ul>  

4.html

<script type="text/javascript"></script>

5.html

<script type="text/javascript" src="script.js"></script>

6.html

jQuery(document).ready(); หรือแบบสั้น
$(document).ready();

j1.js

$('.leftmenu ul ul').hide();

j2.js

var mainMenu  = $('.menu');
mainMenu.click(function() {
    if(!$(this).hasClass('active')) {
      $(this).next('ul').slideDown(); 
    } 
});

j3.js

if(!$(this).hasClass('active')) {
  $(this).siblings('ul').slideUp();
  $(this).next('ul').slideDown(); 
} 

j4.js

if(!$(this).hasClass('active')) {
  $(this).siblings('ul').slideUp();
  $(this).next('ul').slideDown();  
} 

j5.js

if(!$(this).hasClass('active')) {
  $(this).siblings('ul').slideUp();
  $(this).next('ul').slideDown();  
  $(this).addClass('active');
  $(this).siblings().removeClass('active'); 
} 

j6.js

else {
  $(this).removeClass('active');
  $(this).next().stop(true,true).slideUp();
} 

main.css

.leftmenu {
	width: 30%; 
	padding-bottom: 15px; 
	text-align: center; 
	margin-right: 5px; 
} 
.menu { 
	color:#fff; 
	background-color:#000; 
	list-style:none; 
	margin: 5px 0px; 
	padding:5px; 
	border: 2px solid #000; 
	border-radius: 15px; 
}
.menu:hover { 
	color:#000; 
	background-color:#fff; 
	cursor: pointer;
}
.submenu {	
	list-style:none; 
	background-color: #c8c8c8; 
	margin: 3px 0px; 
	padding:3px; 
 	border : 2px solid #000; 
 	border-radius:15px; 
 }

main.html

<div class="leftmenu">
  <ul>
  <!-- Programming -->
    <li class ="menu" id="programming" >Programming </li>
      <ul>
        <li class="submenu"><a href="#" title="Java" > Java</a></li>
        <li class="submenu"><a href="#" title="C++" > C++</a></li>
        <li class="submenu"><a href="#" title="Objective-C" > Objective-C</a></li>
      </ul> 

  <!-- Web Programming -->
    <li class ="menu" id="category" >Web Programming </li>
      <ul>
        <li class="submenu"><a href="#" title="HTML" > HTML</a></li>
        <li class="submenu"><a href="#" title="CSS" > CSS</a></li>
        <li class="submenu"><a href="#" title="javascript" > javascript</a></li>
      </ul> 

  <!-- OS -->
    <li class ="menu" id="os" >OS</li>
      <ul>
        <li class="submenu"><a href="#" title="Ubuntu" >Ubuntu</a></li>       
        <li class="submenu"><a href="#" title="Windows" >Windows</a></li>    
        <li class="submenu"><a href="#" title="Mac OS" >Mac OS</a></li>    
      </ul>
  </ul>  
</div>

main.js

jQuery(document).ready(function() {
    $('.leftmenu ul ul').hide();
    var mainMenu  = $('.menu');
    mainMenu.click(function() {
      if(!$(this).hasClass('active')) {
       $(this).siblings('ul').slideUp();
        $(this).next('ul').slideDown();  
        $(this).addClass('active');  
        $(this).siblings().removeClass('active'); 
    } else {
    	$(this).removeClass('active');
    	$(this).next().stop(true,true).slideUp();
    } 
    });
});