css技术分享之二级、三级下拉菜单的制作:
首先看一下网页中的三级下拉菜单:
接下来自己动手试一试吧!
制作多级下拉菜单 在css中我们需要用到:
hover选择器用于选择鼠标指针浮动在上面的元素
display:none:隐藏元素
display:black:显示被隐藏的元素
第一步:搭建框架并填充内容
<ul class="c-year">
<li>2017年</li>
<li class="eight">2018年
<ul class="c-month" >
<li class="january">一月
<ul class="c-day">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
</ul>
</li>
<li>二月</li>
<li>三月</li>
<li>四月</li>
<li>五月</li>
<li>六月</li>
</ul>
</li>
<li>2019年</li>
<li>2020年</li>
<li>2021年</li>
<li>2022年</li>
</ul>
第二步:编写css样式
注意:子元素会继承父元素的样式,如果想要改变样式,可以给要改变样式的对象一个id或者class单独设置其属性。注释部分为下拉菜单隐藏,显示的样式。
<style>
*{
padding: 0;
margin: 0;
}
.c-year{
position: relative;
width: 60px;
height: 250px;
list-style-type: none;
background: rgba(0,0,0,.8);
color: #ffffff;
}
.c-year li{
width: 60px;
height: 40px;
line-height: 40px;
}
.c-month{
position: absolute;
top: 40px;
left: 60px;
width: 400px;
color: #ffffff;
background: rgba(0,0,0,.7);
text-align: center;
/*隐藏二级菜单*/
display: none;
}
.c-month li{
display: inline-block;
}
.c-day{
position: absolute;
top: 40px;
left:0;
background: rgba(0,0,0,.6);
display: inline ;
/*隐藏三级菜单*/
display: none;
}
/*给所有li在hover时添加背景颜色*/
.c-year li:hover{
background: rgba(255,255,255,.2);
}
/*当鼠标hover到年份时让月份显示*/
.c-year li:hover .c-month {
display: block;
}
/*当鼠标hover到月份时让日期显示*/
.c-month li:hover .c-day {
display: block;
}
</style>
提示:二级菜单的制作需要注意的三个问题:
1、层级关系:年月日很好的诠释了多级下拉菜单的关系,当点击年份的时候可以让月份显示,点击月份的时候可以让日期显示,也就是说我们需要给要显示对象父级设置hover。
2、子元素会继承父元素的样式:在写css样式是我们会发现子元素会继承父元素的样式,如果想要改变样式,可以给要改变样式的对象一个id或者class单独设置其属性
3、position:relative(相对定位)/absolute(绝对定位)的用法。