猎凡网络承接仿站、网站定制业务,诚邀您的合作! 猎凡网为你提供:dedecms织梦仿站帝国cms仿站网站定制、企业仿站等服务,欢迎您的访问!
<
>
当前位置: 首页 > 仿站知识

仿站鼠标移动下拉菜单(纯用CSS做的下拉菜单)

时间:2021-04-27 17:04:47  来源:admin  作者:落笔承冰

我们先看一下最终效果。纯用CSS做的下拉菜单,真的很简单。【211】

图1

一、开始吧,我们先做一个盒子drop,它以后要装的是按钮和下拉列表。

纯用CSS做的下拉菜单,真的很简单。【211】

图2

二、在盒子drop里面做一个按钮dropbt。

纯用CSS做的下拉菜单,真的很简单。【211】

图3

纯用CSS做的下拉菜单,真的很简单。【211】

图4

三、按钮有点丑了,于是我们给按钮加点样式。

纯用CSS做的下拉菜单,真的很简单。【211】

图5

纯用CSS做的下拉菜单,真的很简单。【211】

图6

四、下面我们做出下拉列表,它们是一串链接,我们用一个盒子dropbox装着。

纯用CSS做的下拉菜单,真的很简单。【211】

图7

纯用CSS做的下拉菜单,真的很简单。【211】

图8

五、列表是横着的,而且不怎么好看,我们先改超链接a的样式。

纯用CSS做的下拉菜单,真的很简单。【211】

图9

纯用CSS做的下拉菜单,真的很简单。【211】

图10

六、菜单列表好看许多了,我们给列表盒子dropbox加点样式,比如阴影。

纯用CSS做的下拉菜单,真的很简单。【211】

图11

纯用CSS做的下拉菜单,真的很简单。【211】

图12

七、再好看的菜单列表一开始也是要先隐藏的。

纯用CSS做的下拉菜单,真的很简单。【211】

图13

纯用CSS做的下拉菜单,真的很简单。【211】

图14

八、我们让鼠标移到按钮上时,按钮颜色变浅。

纯用CSS做的下拉菜单,真的很简单。【211】

图15

纯用CSS做的下拉菜单,真的很简单。【211】

图16

九、现在可以设置点击后,下拉菜单出现了。

纯用CSS做的下拉菜单,真的很简单。【211】

图17

纯用CSS做的下拉菜单,真的很简单。【211】

图18

十、下拉菜单出现了,但你会发现鼠标在右侧时,菜单也会弹出来,我们改一下样式,解决这个问题,再次移过去的时候,你会发现只有在按钮位置才会弹出菜单了。

纯用CSS做的下拉菜单,真的很简单。【211】

图19

十一、完善一下,当鼠标移动菜单列表时,背景色改变。

纯用CSS做的下拉菜单,真的很简单。【211】

图20

纯用CSS做的下拉菜单,真的很简单。【211】

图21


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .dropbt{
 padding: 10px;
 /* 按钮内边框离 */
 font-size: 16px;
 /* 按钮字体大小 */
 background: #369;
 /* 按钮背景色 */
 border: none;
 /* 去掉按钮边框 */
 color: white;
 /* 按钮字的颜色 */
 cursor: pointer;
 /* 鼠标在按钮上的小手标记 */
 }
 .dropbox a {
 color: black;
 /* 链接字的颜色改成黑色 */
 padding: 10px;
 /* 链接内边距 */
 text-decoration: none;
 /* 去掉可恶的下划线 */
 display: block;
 /* 链接独立成行 */
 }
 .dropbox{
 display: none;
 /* 不显示 */
 position: absolute;
 /* 盒子的位置为相对定位 */
 background-color: #f9f9f9;
 /* 盒子的背景色 */
 box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
 /* 盒子的阴影,这里设置了右边4下边8 */
 }
 .drop:hover .dropbt{
 background: #2f84d8;
 /* 鼠标在按钮上时,按钮背景色变 */
 }
 .drop:hover .dropbox{
 display: block;
 /* 鼠标在drop上时,dropbox菜单出现 */
 }
 .drop{
 display: inline-block;
 /* 这是让盒子drop不占整行,去掉盒子天生占行的属性 */
 } 
 .dropbox a:hover{
 background: #cccdcf;
 /* 这里是鼠标移动菜单列表时改变背景色 */
 }
 </style>
</head>
<body>
 <div class="drop">
 <button class="dropbt">点我下拉菜单</button>
 <div class="dropbox">
 <a href="#">是下拉菜单一</a>
 <a href="#">是下拉菜单二</a>
 <a href="#">是下拉菜单三</a>
 </div>
 </div>
</body>
</html>

本文网址:https://fangzhan.seobr.com/news/451.html
本文由猎凡仿站网发布,如果您还想了解更多关于网站仿制的文章,请点击查看 仿站知识 的其它文章,转发请注明来源及版权归属。
承接以下业务:传统网站改自适应网站、网站增加手机站、网站改全屏网站改大屏展示、GBK转UFT-8、DEDECMS转WORDPRESS、网站站群制作、企业网站设计、企业网站优化、网站托管等业务

相关文章

    无相关信息
推荐资讯
热点标签

数年专注于仿站建站,擅长dedecms仿站、WORDPRESS仿站、帝国cms仿站、网站改版等业务! Copyright©2019 猎凡仿站网 All Rights Reserved