Dropdown menu อย่างง่ายด้วย jQuery, CSS

เป็นบทความที่ต่อเนื่องจากบทความก่อนหน้า คือ "Popup menu แนวตั้งอย่างง่ายด้วย jQuery, CSS" และทำให้บทความนี้ง่ายต่อการเขียนด้วย เพราะเพียงแต่นำบทความก่อนมาปรับแต่งเฉพาะ CSS เท่านั้น เราก็จะได้ Dropdown menu ไว้ใช้แล้ว....

เริ่ม... ผมก็นำบทความเรื่อง "Popup menu แนวตั้งอย่างง่ายด้วย jQuery, CSS" มาตัดรูปภาพออกหมด
เสร็จแล้ว ผมก็ปรับแก้เฉพาะ ไฟล์ style.css, ie.css สองไฟล์นี้เท่านั้น...

Code ที่เสร็จแล้ว
ไฟล์ style.css

body{
font-size: 14px;
}

#leftmenu li{
float: left;
background:#DDDDDD;
margin:0 1px 0 0;
list-style: none;
padding:5px;
cursor: default;
}

.menu{
display: none;
position: absolute;
margin-top:5px;
width:100px;
border:1px solid #B1B1B1;
background:#DDDDDD;
margin-left:-5px;
}

.menu li a{
list-style:none;
color:#000000;
text-decoration: none;
margin-left:-25px;
}

Code ที่เสร็จแล้ว
ไฟล์ ie.css

.menu{
margin-top:21px;
margin-left:-81px;
width:150px;
}

.menu li a{
margin-left:20px;
}

#fruit{
margin-left:-83px;
}

#fish{
margin-left:-80px;
}

เพียงเท่านี้เราก็ได้ Dropdown menu ไว้ใช้อีกแบบ
บทความนี้ก็จบลงเพียงเท่านี้ครับ.......