点此查看所有教程、项目、源码导航
本文目录
1. 前言2. 开发过程2.1 HTML元素组成2.2 设定按钮样式2.3 设置菜单区域样式2.4 设置菜单中链接样式2.5 设置下拉菜单样式3. 小结1. 前言
下拉菜单也是使用频率很高的网页控件，例如百度首页上方的【设置】按钮就是一个下拉菜单，当我们的鼠标指向该按钮时，会弹出下拉菜单。
本篇我们就通过CSS来一步一步编写一个简单的下拉菜单。
2. 开发过程
2.1 HTML元素组成
首先我们确定下HTML元素部分，有一个按钮button，然后按钮下面是菜单区域div，菜单区域包含多个链接a。然后下拉菜单作为一个整体，我们用一个div包裹起来。所以HTML代码如下：
<body><div class="dropdown"><button class="dropdown-button">下拉菜单</button><div class="dropdown-menu"><a href="#">菜单1</a><a href="#">菜单2</a><a href="#">菜单3</a></div></div></body>
其中drowdown表示下拉菜单，dropdown-button表示按钮，dropdown-menu表示菜单区域。此时由于尚未编写任何CSS样式代码，效果如下：
2.2 设定按钮样式
我们一步一步来处理下拉菜单，首先编写按钮的样式，代码如下，注意看注释：
/* 按钮样式 */.dropdown-button {/* 颜色采用之前用过的百度蓝 */background-color: #4569FF;/* 字体采用白色 */color: white;/* 不要边框线 */border: none;/* 使用圆角 */border-radius: 8px;/* 将按钮撑的大一些 */padding: 8px;}
此时效果如下：
另外我们希望当鼠标悬停到下拉菜单区域时，按钮颜色能变化，这样有一个动态的效果，所以添加CSS代码：
/* 当鼠标悬停于下拉菜单上方时，按钮样式 */.dropdown:hover .dropdown-button {background-color: blue;}
此时当鼠标移到下拉菜单上方时，颜色变化为更深的蓝色。
2.3 设置菜单区域样式
首先菜单区域默认应该是不显示的，然后应设定一个宽度和边框，让下拉菜单区域能够有一个好看的边界：
/* 下拉菜单 */.dropdown-menu {/* 默认不显示 */display: none;/* 设置宽度 */width: 160px;/* 设置边框 */border: 2px solid #E5F1FB;}
此时效果如下：
当鼠标悬停到下拉菜单上方时，菜单区域应显示出来：
/* 鼠标悬停时，显示菜单区域 */.dropdown:hover .dropdown-menu {display: block;}
所以悬停时，效果如下：
2.4 设置菜单中链接样式
菜单中的超级链接应该是垂直排列，此时我们可以调整其盒模型为block，这样就独占一块了。另外链接字体设为黑色，并通过padding增大间距。
/* 链接样式 */.dropdown-menu a {/* 换行 */display: block;/* 黑色字体 */color: black;/* 增大间距 */padding: 8px 12px;/* 去掉下划线 */text-decoration: none;}
此时效果如下：
然后我们再给鼠标悬停的链接增加一个选中效果：
/* 链接悬停样式 */.dropdown-menu a:hover {/* 颜色值为按钮默认颜色，有呼应效果 */background-color: #4569FF}
悬停时，效果如下：
2.5 设置下拉菜单样式
还有一个非常重要的点，可能不容易发现，就是目前下拉菜单整体是一个div，它会占用一个块，也就是说整行的空间都被其占用。表现为鼠标移到下拉菜单右侧时，也会引发菜单区域展开。
但是我们实际希望下拉菜单，只占用看到的那些区域就OK，此时很简单，设置盒模型为inline-block即可，行内-块级元素，即占据空间，又不会引起换行。
/* 整个下拉菜单 */.dropdown {display: inline-block;}
此时鼠标只有在下拉菜单上方，才会触发菜单区域展开。
3. 小结
下拉菜单已经做出来了，其实还不够完善，要做一个完美的网页控件，可能需要大量的工作，尚需努力！
