โค้ดต่อไปนี้เป็นการสร้าง Split Button Dropdown ด้วย CSS
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; } button { background-color: rgb(18, 5, 95); color: white; padding: 16px; font-size: 20px; font-weight: bolder; font-family: monospace, sans-serif; border: none; outline: none; } .dropMenu { position: absolute; display: inline-block; } .dropMenu button { border-left: 1px solid #0d8bf2; } .dropContent { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; z-index: 1; } .dropContent a { color: black; background-color: rgb(184, 253, 255); font-size: 18px; font-weight: bold; padding: 12px 16px; text-decoration: none; display: block; } .dropContent a:hover { background-color: rgb(48, 0, 110); color: white; } .dropMenu:hover .dropContent { display: block; } .btn:hover, .dropMenu:hover .btn { background-color: #0b7dda; } </style> </head> <body> <h1>Split Button dropMenu Example</h1> <button>Button</button> <div class="dropMenu"> <button> >> </button> <div class="dropContent"> <a href="#">First Link</a> <a href="#">Second Link</a> <a href="#">Third Link</a> </div> <h1>Hover over '>>' to open dropMenu menu</h1> </body> </html>ผลลัพธ์
โค้ดข้างต้นจะสร้างผลลัพธ์ดังนี้
เมื่อ Hover ที่ปุ่ม Dropdown เมนูจะเปิดดังนี้
