Css我们来实现第一个实例，鼠标hover显示下拉菜单，我们最后要实现的效果如下图所示：
首先放一下所有这次试用的所有html代码：
ini
复制代码
<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
css
复制代码
/*最外层div*/ .div-top{ margin-left: 100px; /*相对定位，这个作用是让菜单显示位置相对于最外层的div的位置显示*/ position: relative; }
2 ：图片div box_show
css
复制代码
/*图片div*/ .box_show{ width:100px; height:100px; }
这个div的作用其实不在于设置宽高，设置宽高，我可以直接给img标签变成块级元素，给其设置宽高可能来的更实在一点，起码我是这么认为的。
他的作用更多的是用来控制同级兄弟div的样式。
3 ：菜单div nav_stacked
css
复制代码
/*菜单div*/ .nav_stacked{ /*默认是不显示的*/ display:none; /*绝对定位显示，相对于最外层的绝对定位显示*/ position: absolute; /*显示位置*/ top:20px; left:-20px; } /*鼠标滑过，显示（当然这是指他显示出来之后的事情）*/ .nav_stacked:hover { display:block; }
4 ：图片div的鼠标滑过（hover）事件 box_show:hover
css
复制代码
/*增加同级div的class的样式*/ .box_show:hover+.nav_stacked{ display:block; }
这个写法 比较有意思，着重了解一下。
到这一步为止，我们就实现了鼠标hover图片div，显示菜单的功能。如下图所示：
但是现在这个菜单的样式不太好看，我们再继续美化一下菜单的样式
5 ：菜单ul ul_back
css
复制代码
/*菜单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
css
复制代码
/*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
如下图所示：
红框标注位置，有一个小尖尖角，这个使用样式是这样实现的。
css
复制代码
/*小尖尖角样式*/ .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; }
最终，上边的代码写在一起，就形成了我们最开始想要完成的效果图。
测试使用全部源码：
xml
复制代码
<!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
欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”
