Cascading Style Sheets (CSS) เป็นชื่อที่ใช้เพื่ออธิบายวิธีการจัดรูปแบบเอกสาร Hyper Text Markup Language (HTML) หรือ Extensible Markup Language (XML) สามารถใช้สำหรับเอกสาร XML ชนิดใดก็ได้ แต่ส่วนใหญ่มักใช้กับหน้าเว็บที่เขียนด้วย HTML CSS สามารถใช้เพื่อสร้างเมนูแบบเลื่อนลงบนหน้าเว็บ เมนู CSS แบบเลื่อนลงมีรายการข้อความเดียวที่แสดงจนกว่าผู้เยี่ยมชมจะใช้เมาส์เพื่อเลื่อนเมาส์ไปเหนือเมนูซึ่งจะแสดงรายการทั้งหมด เมนูถูกสร้างขึ้นโดยใช้การระบุ CSS และแท็กคลาส
เมนู CSS แบบเลื่อนลงเริ่มต้นด้วยตัวเลือก ID ตัวเลือกนี้ดูเหมือน # ตามด้วยชื่อของ ID คุณสามารถตั้งชื่อ ID ได้ทุกอย่าง แต่ควรอธิบายเพื่อให้ผู้อื่นสามารถอ่านรหัสของคุณได้ ตัวอย่างเช่นเมนูแบบเลื่อนลงสามารถใช้รหัส # drop1
สร้างคลาสสำหรับไอเท็มแรกในเมนู CSS แบบเลื่อนลงโดยใช้ตัวเลือกคลาสซึ่งดูเหมือนจุด ชั้นจะเป็นส่วนหนึ่งขององค์ประกอบรายการ HTML องค์ประกอบรายการถูกกำหนดโดยอักขระ "li" สร้างคลาสระดับบนสุดโดยพิมพ์ "li.top" คำอธิบายคลาสมีอยู่ระหว่างเครื่องหมายปีกกาสองอัน
ตัวอย่างต่อไปนี้แสดงรหัส CSS ทั้งหมดสำหรับรายการแรกในรายการ:
# drop1 li.top {font-family: Verdana, Geneva, san-serif;
ขนาดตัวอักษร: 100%;
สี: # FF00FF;}
จากนั้นสร้างคลาสสำหรับรายการที่จะซ่อนอยู่ใต้รายการแรกในเมนู CSS ชั้นจะอธิบายรายการ HTML ที่ไม่ได้เรียงลำดับซึ่งถูกกำหนดด้วยอักขระ "ul" คำอธิบายจะมีลักษณะเหมือนกับรายการเมนูระดับบนสุดด้วยการเพิ่มคำว่า "display: none # 59" ที่จุดเริ่มต้นของคำอธิบาย สิ่งนี้บ่งชี้ว่ารายการในรายการที่ไม่ได้เรียงลำดับจะถูกซ่อนไว้จนกว่าตัวชี้จะอยู่เหนือเมนู CSS แบบเลื่อนลง
ต่อไปนี้เป็นตัวอย่างของส่วนนี้ของรหัส CSS:
# drop1 ul.link {
display: none # 59
font-family: Verdana, Geneva, san-serif;
ขนาดตัวอักษร: 100%;
สี: # FF00FF;}
คุณจะต้องไปที่เมนู CSS แบบเลื่อนลงเพื่อให้ปรากฏเหนือเอกสาร HMTL มิฉะนั้นเมื่อผู้เข้าชมเลื่อนเมาส์ไปที่เมนูผู้เข้าชมจะเลื่อนเอกสารที่เหลือลงไปเพื่อให้มีที่ว่างสำหรับรายการ การตั้งองค์ประกอบตำแหน่งให้เป็นสัมบูรณ์จะทำเช่นนี้
รหัสสำหรับกำหนดตำแหน่งคือ:
# drop1 {position: absolute;}
นั่นคือทั้งหมดที่จำเป็นสำหรับส่วน CSS ของเมนูแบบเลื่อนลง เมนู CSS ส่วนที่เหลือถูกสร้างขึ้นในเอกสาร HTML โดยใช้องค์ประกอบ "div," "id," "class," "li" และ "ul" แท็ก "div" แยกส่วนเมนูของเอกสาร พิมพ์ <div id = "drop1"> เพื่อสร้างส่วนเมนูแบบเลื่อนลง จากนั้นเริ่มรายการที่ไม่เรียงลำดับโดยใช้องค์ประกอบ "ul" ของ HTML
เพิ่มคลาสบนสุดให้กับรายการแรกและคลาสลิงก์สำหรับรายการที่เหลือ รหัส HTML ควรมีลักษณะคล้ายกับ:
<div id = "drop1">
<li class = "top"> รายการยอดนิยม </li>
<li class = "link"> <a href="#"> รายการ </a> </li>
<li class = "link"> <a href="#"> รายการ </a> </li>
<li class = "link"> <a href="#"> รายการ </a> </li>
</ul> </div>
เมื่อคุณเปิดเอกสารในเว็บเบราว์เซอร์เมนู CSS แบบเลื่อนลงจะปรากฏเป็นรายการเดียวในหน้า เมื่อคุณเลื่อนเมาส์ไปที่รายการด้านบนเมนูที่เหลือจะปรากฏขึ้น ส่วนที่เหลือของข้อความบนหน้าจะไม่ย้าย แต่ส่วนจะถูกซ่อนไว้โดยเมนู
