css中怎样制作下拉菜单

在网页设计中，下拉菜单被广泛应用，它可以在有限的页面空间内方便地显示多种选项。而制作下拉菜单却需要使用CSS技术。下面就让我们来看看如何利用CSS制作下拉菜单。 首先，在HTML中定义一个下拉菜单需要使用标签和标签，如下所示：

请选择你要的商品：

请选择商品类型 电器 服装 美食但是这时的下拉菜单样式并不好看，我们需要使用CSS来美化。 首先，我们可以将标签设置为一个块元素，以保证下拉菜单显示在选项下方。代码如下： pre{ background-color: #EEE; padding: 10px; font-size: 14px; border: 1px solid #999; } select{ display: block; width: 200px; padding: 10px; margin: 0 auto; background-color: #FFF; color: #333; font-size: 16px; border: 2px solid #CCC; border-radius: 5px; -webkit-appearance:none; } 接着，我们给标签设置样式以美化选项的外观。代码如下： select option{ background-color: #FFF; color: #333; font-size: 16px; padding: 10px; } 接下来是关键部分，我们需要使用伪类:hover来实现鼠标悬停时下拉菜单的样式变化。代码如下： select:hover{ background-color: #F9F9F9; color: #444; } select option:hover{ background-color: #F2F2F2; color: #333; } 最后，我们需要使用子选择器>来限定只有下拉菜单选项才会显示出来，而不会影响其他元素。代码如下： select > option{ display: none; } select:hover > option{ display: block; } 这里遇到一个问题是当在某些手机设别上无法正常使用乘号选择器 ">" ，需要在自己写CSS的时候避免使用. 通过上面的步骤，我们就可以轻松地制作出美观的下拉菜单啦！