CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table
เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdeejavascript เมนู css แนวนอน
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ javascript เมนู css แนวนอน
ไปที่
Copy
CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table
CSS Code
<style type="text/css"> ul.v_menu{ /* กำหนดขอบเขตของเมนู */ list-style:none; margin:0px; padding:0px; font-family:tahoma, "Microsoft Sans Serif", Vanessa; font-size:12px; } ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูหลัก */ display:block; width:150px; height:20px; text-indent:5px; background-color:#FFCC00; border:1px #006633 inset; float:left; text-align:center; } ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */ display:block; width:150px; height:20px; text-indent:5px; background-color:#FFFFCC; border:1px #006633 inset; float:left; text-align:center; } ul.v_menu > li > a,ul.v_menu > li > ul > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */ text-decoration:none; color:#666666; line-height:20px; } ul.v_menu > li > ul{ display:none; list-style:none; margin:0px; padding:0px; } ul.v_menu > li:hover > ul { display:block; width:150px; } ul.v_menu > li > ul > li{ /* กำหนดรูปแบบให้กับเมนูย่อย */ display:block; width:150px; height:20px; text-indent:5px; background-color:#FFFFCC; border:1px #F4F4F4 solid; float:left; text-align:center; } ul.v_menu > li > ul > li:hover{ /* กำหนดรูปแบบให้กับเมนูย่อยเมื่อเมาส์อยู่เหนือ */ display:block; width:150px; height:20px; text-indent:5px; background-color:#F4F4F4; border:1px #F4F4F4 solid; float:left; text-align:center; } </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> <li><a href="#">Sub menu item 4</a></li> <li><a href="#">Sub menu item 5</a></li> <li><a href="#">Sub menu item 6</a></li> <li><a href="#">Sub menu item 7</a></li> <li><a href="#">Sub menu item 8</a></li> </ul> </li> <li><a href="#">Link menu item 4</a></li> </ul>
ดูตัวอย่าง
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()