css實現下拉選單以及下拉箭頭旋轉效果
阿新 • • 發佈：2019-02-01
<!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>
</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>
</html>