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

05 November 2008 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

เมนู css javascript แนวตั้ง

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เมนู css javascript แนวตั้ง

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>

ดูตัวอย่าง