本文目录
- 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. 小结
下拉菜单已经做出来了，其实还不够完善，要做一个完美的网页控件，可能需要大量的工作，尚需努力！
