css实现下拉菜单以及下拉箭头旋转效果<!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，添加。drop-menu-->
<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-->
<li><a class="title">我的淘宝</a></li>
</ul>
</div>
</body>
borderbox
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。