/* 下拉按钮样式 */ .dropbtn { background-color:#4CAF50; color:white; padding:16px; font-size:16px; border:none; cursor:pointer; border-radius:3px; } .dropbtn::after { content:" "; width:0; height:0; display:inline-block; border:6px solid white; margin-left:3px; vertical-align:middle; border-top-width:12px; border-bottom-width:0; border-left-color:transparent; border-right-color:transparent; } .dropdown { position:relative; display:inline-block; } /* 下拉内容 (默认隐藏) */ .dropdown-content { display:none; position:absolute; 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; box-shadow:0 0 2px #eee; } /* 在鼠标移上去后显示下拉菜单 */ .dropdown:hover .dropdown-content { display:block; } /* 当下拉内容显示后修改下拉按钮的背景颜色 */ .dropdown:hover .dropbtn { background-color:#3e8e41; }
纯html 和css 写一个简单的下拉菜单(附加一个小向下箭头的css写法) 供大家赏玩