css实现下拉菜单以及下拉箭头旋转效果

最新推荐文章于 2024-09-04 09:48:42 发布

wax9092

最新推荐文章于 2024-09-04 09:48:42 发布

阅读量9.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/wax9092/article/details/79035758

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉菜单动画制作</title>
<style>
*{margin:0;padding:0;box-sizing: border-box;list-style: none;}
.nav{width: 100%;height: 30px;background: #f2f2f2;}
.nav ul{width: 800px;margin:0 auto}
.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}
/*没有下拉菜单鼠标划过的样式*/
.nav ul li .title:hover{color: #ff0036;}
/*.drop-menu 为添加下拉菜单的class 鼠标划过时的样式*/
.nav ul .drop-menu .wrap:hover .title{background: #fff;color: #ff0036;}
/*小角样式*/
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;}
.toggle .box{padding:5px 15px;}
.toggle .box a{display:block;cursor: pointer;}
/*控制显示与隐藏*/
.nav ul .drop-menu:hover .toggle{display: block;}
.toggle .box a:hover{color: #FF0036;}
</style>
</head>
<body>
<div class="nav">
<ul>

<li class="drop-menu">
<div class="wrap">
<a class="title">我的淘宝<b></b></a>
<div class="toggle">
<div class="box">
<a>dbfdb</a>
<a>dbfdb</a>
<a>dbfdb</a>
</div>
</div>
</div>
</li>

<li><a class="title">我的淘宝</a></li>
</ul>
</div>
</body>
</html>