flex导航制作
程序员文章站
2023-12-21 17:51:10
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style>
*{
margin: 0px;
padding: 0px;
text-decoration: none;
}
a{
color:#fff;
}
nav{
/*height: 60px;*/
background-color: red;
}
li{
list-style: none;
/*padding: 6px 20px;*/
}
li:hover{
background-color: darkred;
}
nav>ul{
/*height: 60px;*/
/*background-color: cornflowerblue;*/
display:flex;
justify-content: center;
align-items: center;
/*margin: 10px auto;*/
}
nav>ul>li{
position: relative;
padding: 10px 20px;
}
nav>ul>li>ul{
background-color:red;
position:absolute;
left:0px;
top: 40px;
display: none;
}
nav>ul>li>ul>li{
padding: 6px 20px;
}
nav>ul>li>ul>li>a{
/*font-size: 14px;*/
}
nav>ul>li:hover>ul{
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">首 页</a></li>
<li><a href="">直 播</a>
<ul>
<li><a href="">英雄联盟</a></li>
<li><a href="">和平精英</a></li>
<li><a href="">王者荣耀</a></li>
<li><a href="">穿越火线</a></li>
</ul>
</li>
<li><a href="">分类</a>
<ul>
<li><a href="">网游竞技</a></li>
<li><a href="">单机热游</a></li>
<li><a href="">娱乐天地</a></li>
<li><a href="">休闲手游</a></li>
</ul>
</li>
<li><a href="">赛事</a></li>
<li><a href="">视频</a></li>
<li><a href="">网游</a></li>
<li><a href="">云游戏</a></li>
</ul>
</nav>
</body>
</html>