主页导航设计

来源：互联网发布：mysql 创建触发器编辑：程序博客网时间：2024/05/01 02:27

<!DOCTYPE html>
<html>
<head>
<title>CSS_nav</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
margin-left: -40px;
/*visibility: hidden;*/

}
.warp{
width: 600px;
margin: 100px auto;
height: 43px;
background: red;
font-size: 0; /* 解决图片间距为0 */

}
.warp>ul>li{
/*将元素转化为类图片格式“半妖”*/
display: inline-block;
width: 20%;
height: 100%;
text-align: center;
/*line-height: 100%;这里100%不行的*/
line-height: 45px;
font-size: 14px;
background: #faa;
vertical-align: top;
}
.warp>ul>li:hover{
background: #E5266A;
}
a{
text-decoration: none;
font-size: 16px;
font-family: "幼圆";
font-weight: 500;
}
.warp a:link,
.warp a:visited{
color: #fff;
text-decoration: none;
}

.sec-nav>ul{
display: none;
margin: 0px;
padding: 0px;
}
.sec-nav>ul>li{
height: 45px;
font-size: 16px;
font-family: "幼圆";
color: #fff;
}
.sec-nav>ul>li:hover{
background: #faa;
cursor: pointer;
color: yellow;
}

.sec-nav:hover ul{
display: block;
}

.sec-nav>ul>li>ul{
visibility: hidden;
position: relative;
top: -45px;
right: 120px;
font-size: 16px;
font-family: "幼圆";
color: #fff;
background-color: #faa;

}
.sec-nav>ul>li:hover ul{
visibility: visible;
}

/* div{
width: 100px;
height: 100px;
background: red;
float: left;
margin-top: 300px;
}*/
.s{
/*display: none;*/
隐藏可视化，结构保留“隐形的翅膀！”
visibility: hidden;
}
</style>
</head>
<body>
<div class="warp">
<ul>
<li>
<a href="#">首页</a>
</li>
<li class="sec-nav">
<a href="#">狗雄联盟</a>

<ul>
<li>
<a href="">法海</a>
<ul>
<li> <a href="">kjdsfsa</a>

</li>
<li>dsfsdlkn</li>
<li>dsfsdljf</li>
</ul>

</li>
<li>
<a href="">不懂</a>
<ul>
<li>kjdsfsa</li>
<li>dsfsdlkn</li>
<li>dsfsdljf</li>
</ul>
</li>
<li>
<a href="">爱，下来</a>
<ul>
<li>kjdsfsa</li>
<li>dsfsdlkn</li>
<li>dsfsdljf</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">EVE</a>
</li>
<li>
<a href="#">找你妹</a>
</li>
<li>
<a href="#">剑灵</a>
</li>
</ul>
</div>


</body>
</html>

0 0