/* 普通下拉菜单 */ .dropdown-menu { display: none; } .dropdown:hover .dropdown-menu { display: block; } /* 带动画的下拉菜单 */ .dropdown-menu { opacity: 0; visibility: hidden; transition: all 0.3s ease; } .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; } /* 带阴影的下拉菜单 */ .dropdown-menu { box-shadow: 0 5px 10px rgba(0,0,0,0.3); }
以上是几种简单的下拉菜单样式,但是你也可以根据自己的需求和网站的风格设计出更加独特的下拉菜单。下拉菜单的样式不仅仅可以通过 CSS 来实现,在 JavaScript 中也有很多优秀的下拉菜单插件,可以让你更方便地实现定制化的下拉菜单。
总之,一个漂亮而实用的下拉菜单可以大大提升网站用户体验,让用户更加愉悦地浏览你的网站。