CSS下拉菜单

来源：互联网发布：visio中文版mac下载编辑：程序博客网时间：2024/06/08 15:00

<!DOCTYPE html><html><head><title>下拉菜单实例|菜鸟教程(runoob.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;    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>鼠标移动到按钮上打开下拉菜单。</p><div class="dropdown">  <button class="dropbtn">下拉菜单</button>  <div class="dropdown-content">    <a href="http://www.runoob.com">菜鸟教程 1</a>    <a href="http://www.runoob.com">菜鸟教程 2</a>    <a href="http://www.runoob.com">菜鸟教程 3</a>  </div></div></body></html>

效果图请参见：http://www.runoob.com/try/try.php?filename=trycss_dropdown_button

0 0