CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table

CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table

CSS Code

<style type="text/css">   
ul.v_menu{ /* กำหนดขอบเขตของเมนู */  
    list-style:none;   
    margin:0px;   
    padding:0px;   
    width:180px;   
    font-family:tahoma, "Microsoft Sans Serif", Vanessa;   
    font-size:12px;   
}   
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูเ */  
    display:block;   
    height:20px;   
    text-indent:5px;   
    background-color:#339900;   
    border:1px #FFFFFF inset;   
}   
ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */  
    display:block;   
    height:20px;   
    text-indent:5px;   
    background-color:#FFCC00;   
    border:1px #FFFFFF inset;   
}   
ul.v_menu > li > a,ul.v_menu > li:hover > ul > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */  
    text-decoration:none;   
    color:#FFFFFF;   
    line-height:20px;   
}  
ul.v_menu > li > ul{
	display:none;
    list-style:none;   
	margin-left:180px; 
    padding:0px;   
    width:180px; 
} 
ul.v_menu > li:hover > ul{
	display:block;
    list-style:none;   
	margin:0px;
	margin-top:-21px;
	margin-left:179px; 
    padding:0px;   
    width:180px; 
} 
ul.v_menu > li:hover > ul > li{ /* กำหนดรูปแบบให้กับเมนูย่อย */
    display:block;   
    height:20px;   
    text-indent:5px;   
    background-color:#FFCC00;   
    border:1px #FFFFFF inset;   
}	
ul.v_menu > li:hover > ul > li:hover{ /* กำหนดรูปแบบให้กับเมนูย่อยเมื่อเมาส์อยู่เหนือ */
    display:block;   
    height:20px;   
    text-indent:5px;   
    background-color:#000000;   
    border:1px #FFFFFF inset;   
}	
</style> 

HTML code

<ul class="v_menu">  
    <li><a href="#">Link menu item 1</a>
		<ul>
			<li><a href="#">Sub menu item 1</a></li>
			<li><a href="#">Sub menu item 2</a></li>
			<li><a href="#">Sub menu item 3</a></li>
			<li><a href="#">Sub menu item 4</a></li>
		</ul>
	</li>  	
    <li><a href="#">Link menu item 2</a></li>  
    <li><a href="#">Link menu item 3</a>
		<ul>
			<li><a href="#">Sub menu item 1</a></li>
			<li><a href="#">Sub menu item 2</a></li>
			<li><a href="#">Sub menu item 3</a></li>							
		</ul>	
	</li>  
    <li><a href="#">Link menu item 4</a>
		<ul>
			<li><a href="#">Sub menu item 1</a></li>
			<li><a href="#">Sub menu item 2</a></li>						
		</ul>		
	</li>              
</ul>  

ดูตัวอย่าง

• Link menu item 1
  • Sub menu item 1
  • Sub menu item 2
  • Sub menu item 3
  • Sub menu item 4
• Link menu item 2
• Link menu item 3
  • Sub menu item 1
  • Sub menu item 2
  • Sub menu item 3
• Link menu item 4
  • Sub menu item 1
  • Sub menu item 2