实现鼠标悬浮下拉菜单箭头会旋转

最新推荐文章于 2024-01-19 10:08:11 发布

依古比古*

最新推荐文章于 2024-01-19 10:08:11 发布

阅读量713

点赞数

分类专栏：日常总结文章标签： css

本文链接：https://blog.csdn.net/wendymwz/article/details/107667173

版权

日常总结专栏收录该内容

28 篇文章 0 订阅

订阅专栏

实现鼠标悬浮下拉菜单箭头会旋转

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      .nav ul li{position:relative;float:left;width: 100px;height: 30px;margin-right: 20px;}
      /*所有li中a标签的样式*/
      .title{position:relative;display: block;font-size: 14px;color: #999;height: 30px;
        line-height: 30px;padding:0 15px}
     
  
      /*小角样式*/
      b{position:absolute;top:15px;right:20px;width: 0;height: 0;border-width:3px;
        border-style: solid dashed dashed;border-color: #bbb transparent transparent;}
      /*点击切换样式*/
      .nav ul .drop-menu:hover .title b{transform:rotate(180deg);transform-origin:50% 25%;
         transition: transform .2s ease-in;}
      /*隐藏下拉菜单样式*/
      .toggle{display:none;position:absolute;left:0;top:30px;width: 130px;border: 1px solid #eee;
      border-top:none;color: #999;}
     li{
       list-style: none;
     }
      .toggle .box a{display:block;cursor: pointer;}
      /*控制显示与隐藏*/
      .nav ul .drop-menu:hover .toggle{display: block;}
      .toggle .box a:hover{color: #FF0036;}
      .toggle{
                background-color: #282b33;
                 width: 1200px;
               height: 600px;
      }
      </style>
</head>

<body>
<div class="nav">
<ul>
<!--有下拉菜单的li,添加。drop-menu-->
<li class="drop-menu">
<div class="wrap">
<a class="title">我的淘宝<b></b></a>
<div class="toggle" style="overflow-x:hidden;overflow-y:auto">

   111111111111

</div>
</div>
</li>
<!--没有下拉菜单的li-->
</ul>
</div>
  
</body>
</html>

直接复制就可用~~

依古比古*

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现鼠标悬浮下拉菜单箭头会旋转

实现鼠标悬浮下拉菜单箭头会旋转代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &
复制链接

扫一扫