<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<style>
/*body 标签 将默认格式清楚掉*/
body{
padding: 0;
margin: 0 auto;
font-size: 12px;
}
/*导航背景 黄颜色区域*/
.beijing{
width: 100%;
height: 40px;
background-color: #ffd200;
margin-top: 15px;
}
/*导航部分 ul标签*/
.nav{
width: 560px;
height: 100%;
margin: 0 auto;
padding: 0;
}
/*导航的每一个小栏目 */
.nav li{
list-style:none;
width: 70px;
height: 100%;
float: left;
text-align: center;
line-height: 40px;
position: relative;
z-index: 99;
cursor: pointer;
}
/*鼠标移入时自带的背景*/
.nav li::before{
content: "";
width: 68px;
height: 28px;
background-color: #edaf1a;
border-radius: 14px;
position: absolute;
top: 6px;
left: 1px;
z-index: -1;
display: none;
}
/*第一个li标签的伪元素(三角形)*/
.nav li:first-child::after{
content: url(img/正三角形.png);
position: relative;
top:-24px;
left: -29px;
display: none;
}
/*鼠标移入时控制背景和三角形*/
.nav li:hover::before,
.nav li:hover::after,
.nav li:hover .tanchuang
{
display: block;
}
/*改变li标签的字体颜色*/
.banner{
width: 100%;
height: 800px;
background-color: #51308b;
}
.tanchuang{
width: 450px;
height: 148px;
background-color: #fff;
float: left;
color: #333;
display: none;
}
.top{
width: 100%;
height: 45px;
border-bottom:1px solid #e8e8e8;
}
.top p{
float:left;
font-size: 14px;
margin: 0 0 0 15px;
}
.top p span{
font-size:12px;
color: #999;
margin-left: 12px;
}
.but{
width: 100px;
height: 30px;
float:right;
margin:7px 15px 0 0;
text-align: center;
line-height: 30px;
background-color: #ff7c00;
font-size: 12px;
font-weight: bold;
border-radius: 3px;
color: #FFFFFF;
cursor: pointer;
}
.content{
width: 100%;
height: 102px;
}
.left{
float:left;
width: 60px;
text-align: center;
font-size: 12px;
color: #333;
}
.right{
float: left;
width: 390px;
padding: 0px;
}
.right span{
float:left;
height: 26px;
color: #666;
line-height: 26px;
margin-left: 10px;
position: relative;
padding: 0 5px;
cursor: pointer;
}
.right span:first-child::before{
content: "";
width: 1px;
height: 12px;
background-color: #e8e8e8;
position: absolute;
top: 14px;
left: -10px;
}
.right span:hover{
content: "";
width: auto;
height: 26px;
border-radius: 13px;
background-color: #f8f8f8;
color: #ff8300;
}
</style>
</head>
<body>
<div class="beijing">
<ul class="nav">
<li>软件入门
<div class="tanchuang">
<div class="top">
<p>软件入门<span>2333人已学习</span></p>
<div class="but">点击充值</div>
</div>
<div class="content">
<div class="left">基础</div>
<div class="right">
<span>PS</span>
<span>AI</span>
<span>AE</span>
<span>LR</span>
<span>PR</span>
<span>DW</span>
<span>CDR</span>
<span>SAI</span>
<span>Maya</span>
<span>Sketch</span>
<span>SketchUp</span>
<span>InDesign</span>
<span>AutoCAD</span>
</div>
<div class="left">练习</div>
<div class="right">
<span>PS练习</span>
<span>AI练习</span>
<span>AE练习</span>
</div>
</div>
</div>
</li>
<li>字体设计</li>
<li>海报设计</li>
<li>C4D教程</li>
<li>图片合成</li>
<li>综合设计</li>
<li>产品精修</li>
<li>系列课</li>
</ul>
</div>
<div class="banner"></div>
</body>
</html>
鼠标移入软件入门时
