/* 定义下拉菜单样式 */ .dropdown { position: relative; display: inline-block; } /* 定义下拉菜单按钮样式 */ .dropdown-btn { border: none; background-color: #f1f1f1; color: black; padding: 10px 20px; font-size: 16px; cursor: pointer; } /* 定义下拉菜单内容样式 */ .dropdown-content { display: none; position: absolute; z-index: 1; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } /* 当鼠标悬停在下拉菜单按钮上时,显示下拉菜单内容 */ .dropdown:hover .dropdown-content { display: block; } /* 定义下拉菜单内容中的选项样式 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 当鼠标悬停在下拉菜单中的选项上时,改变背景颜色 */ .dropdown-content a:hover { background-color: #ddd; }
上面的代码定义了下拉菜单的样式,包括按钮、内容和选项。现在,大家可以创建一个HTML文件,并在其中添加下拉菜单的代码。下面是HTML代码示例。
项目1项目2项目3
上面的代码创建了一个下拉菜单,其中包含三个选项。当鼠标悬停在按钮上时,菜单内容就会显示出来。
总之,通过上面的代码,大家可以轻松地美化下拉菜单,让它更加漂亮和专业。