菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <title>下拉菜单实例|小鸟启蒙(facesoho.com)</title> <meta charset="UTF-8"> <style> .dropbtn { background-color:#4CAF50; color:white; padding:16px; font-size:16px; border:none; cursor:pointer; } .dropdown { position:relative; display:inline-block; } .dropdown-content { display:none; position:absolute; right:0; background-color:#f9f9f9; min-width:160px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color:black; padding:12px 16px; text-decoration:none; display:block; } .dropdown-content a:hover {background-color:#f1f1f1} .dropdown:hover .dropdown-content { display:block; } .dropdown:hover .dropbtn { background-color:#3e8e41; } </style> </head> <body> <h2>下拉内容的对齐方式</h2> <p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p> <div class="dropdown" style="float:left;"> <button class="dropbtn">左</button> <div class="dropdown-content" style="left:0;"> <a href="#">小鸟启蒙 1</a> <a href="#">小鸟启蒙 2</a> <a href="#">小鸟启蒙 3</a> </div> </div> <div class="dropdown" style="float:right;"> <button class="dropbtn">右</button> <div class="dropdown-content"> <a href="#">小鸟启蒙 1</a> <a href="#">小鸟启蒙 2</a> <a href="#">小鸟启蒙 3</a> </div> </div> </body> </html>
运行结果