持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
Css我们来实现第一个实例，鼠标hover显示下拉菜单，我们最后要实现的效果如下图所示：
首先放一下所有这次试用的所有html代码：
<div class="div-top">
<div class="box_show">
<img src="./111.png" alt="" style="margin-left:10px;margin-left: 10px;">
</div>
<div class="nav_stacked" >
<ul class="ul_back">
<li class="xiaojian"></li>
<li class="li_style li_style_border">Important</li>
<li class="li_style li_style_border">Promotions</li>
<li class="li_style" >Social</li>
</ul>
</div>
</div>
复制代码然后，我们从最外层开始解释其中的css样式（class类）
1 ：最外层div div-top
/*最外层div*/
.div-top{
margin-left: 100px;
/*相对定位，这个作用是让菜单显示位置相对于最外层的div的位置显示*/
position: relative;
}
复制代码2 ：图片div box_show
/*图片div*/
.box_show{
width:100px;
height:100px;
}
复制代码这个div的作用其实不在于设置宽高，设置宽高，我可以直接给img标签变成块级元素，给其设置宽高可能来的更实在一点，起码我是这么认为的。
他的作用更多的是用来控制同级兄弟div的样式。
3 ：菜单div nav_stacked
/*菜单div*/
.nav_stacked{
/*默认是不显示的*/
display:none;
/*绝对定位显示，相对于最外层的绝对定位显示*/
position: absolute;
/*显示位置*/
top:20px;
left:-20px;
}
/*鼠标滑过，显示（当然这是指他显示出来之后的事情）*/
.nav_stacked:hover
{
display:block;
}
复制代码4 ：图片div的鼠标滑过（hover）事件 box_show:hover
/*增加同级div的class的样式*/
.box_show:hover+.nav_stacked{
display:block;
}
复制代码这个写法 比较有意思，着重了解一下。
到这一步为止，我们就实现了鼠标hover图片div，显示菜单的功能。如下图所示：
但是现在这个菜单的样式不太好看，我们再继续美化一下菜单的样式
5 ：菜单ul ul_back
/*菜单ul的基本样式*/
.ul_back{
/*清除默认样式*/
list-style: none;
/*设置宽度*/
width:100px;
/*背景色*/
background-color: #FFF;
/*边框*/
border:1px solid #E4E4E4;
/*去掉默认左边的空白*/
padding-inline-start:0px;
}
复制代码设置ul最基础的样式
6 ：li部分的样式 li_style li_style_border
/*li标签边框样式，不是没有li都有边框，所以，将其单独拿出*/
.li_style_border{
border-bottom:1px solid #E4E4E4;
}
/*li标签基本样式*/
.li_style{
text-align: center;
padding: 5px;
color:#333333;
}
/*鼠标滑过li的样式*/
.li_style:hover{
background-color: #EBF3FE;
color:#0066FF;
cursor: pointer;
}
复制代码这里大概说明一下，没个li的样式都不是完全一样的，所以，我将公共样式部分统一写到li_style中，将边框的样式拿出来单写，那个li需要边框，追加上就可以了。
7 ：小尖尖角样式：xiaojian
如下图所示：
红框标注位置，有一个小尖尖角，这个使用样式是这样实现的。
/*小尖尖角样式*/
.xiaojian{
background-color:#FFF;
width:10px;
height:10px;
border:1px solid #E4E4E4;
/* 设置相对定位 */
position:relative;
/*显示位置*/
left:43px;
top:-7px;
/*旋转小方块45度*/
transform:rotate(45deg);
/* 去除右、下边框 */
border-right:0px;
border-bottom:0px;
}
复制代码最终，上边的代码写在一起，就形成了我们最开始想要完成的效果图。
测试使用全部源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
background-color: beige;
}
/*去除A标签默认样式*/
a{
text-decoration: none;
}
/*最外层div*/
.div-top{
margin-left: 100px;
/*对定位，这个作用是让菜单显示位置相对于最外层的div的位置显示*/
position: relative;
}
/*图片div*/
.box_show{
width:100px;
height:100px;
}
/*增加同级div的class的样式*/
.box_show:hover+.nav_stacked{
display:block;
}
/*菜单div*/
.nav_stacked{
/*默认是不显示的*/
display:none;
/*绝对定位显示，相对于最外层的绝对定位显示*/
position: absolute;
/*显示位置*/
top:20px;
left:-20px;
}
/*菜单ul的基本样式*/
.ul_back{
/*清除默认样式*/
list-style: none;
/*设置宽度*/
width:100px;
/*背景色*/
background-color: #FFF;
/*边框*/
border:1px solid #E4E4E4;
/*去掉默认左边的空白*/
padding-inline-start:0px;
}
/*鼠标滑过，显示*/
.nav_stacked:hover
{
display:block;
}
/*li标签边框样式，不是没有li都有边框，所以，将其单独拿出*/
.li_style_border{
border-bottom:1px solid #E4E4E4;
}
/*li标签基本样式*/
.li_style{
text-align: center;
padding: 5px;
color:#333333;
}
/*鼠标滑过li的样式*/
.li_style:hover{
background-color: #EBF3FE;
color:#0066FF;
cursor: pointer;
}
/*小尖尖角样式*/
.xiaojian{
background-color:#FFF;
width:10px;
height:10px;
border:1px solid #E4E4E4;
/* 设置相对定位 */
position:relative;
/*显示位置*/
left:43px;
top:-7px;
/*旋转小方块45度*/
transform:rotate(45deg);
/* 去除右、下边框 */
border-right:0px;
border-bottom:0px;
}
</style>
<body>
<div class="div-top">
<div class="box_show">
<img src="./111.png" alt="" style="margin-left:10px;margin-left: 10px;">
</div>
<div class="nav_stacked" >
<ul class="ul_back">
<li class="xiaojian"></li>
<li class="li_style li_style_border">Important</li>
<li class="li_style li_style_border">Promotions</li>
<li class="li_style" >Social</li>
</ul>
</div>
</div>
</body>
</html>
复制代码文末有实例，可下载。
有好的建议，请在下方输入你的评论。
原文链接：点击这里，走你
欢迎访问个人博客：guanchao.site
欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”