HTML导航条代码
时间：2023-07-06 01:27:01 | 来源：网站运营
时间：2023-07-06 01:27:01 来源：网站运营
HTML导航条代码：<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.box{
width: 850px;
height: 51px;
position:absolute;
z-index: 2;
margin-left: 300px;
background: #3776C6;
}
.box ul{
list-style: none;
padding-left: 100px;
}
.box ul li{
float: left;
padding-left: 0px;
padding-top: 0px;
margin: -5px 20px 0 10px;
}
.box ul li a{
color: #ffffff;
text-decoration: none;
display: block;
font-size: 20px;
line-height: 40px;
text-shadow: 10px 10px 50px #fff;
padding-right: 6px;
}
.box ul li:hover{
color: #fff;
background: #3776C6;
transition: 0.5s;
}
.box ul li a:hover{
color: #000000;
}
.box ul li ul{
padding-left: 0px;
margin-left: 0px;
}
.box ul li ul li{
display: none;
float: inherit;
font-size: 20px;
}
.box ul li:hover ul li{
display: block;
border-top: 1px solid rgba(158,54,56,1.00);
}
.box ul li ul li:hover{
background: #D9530B;
}
.box ul li ul li a:hover{
background: #3776c6;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="#">人工智能的发展</a>
<ul>
<li><a href="人工智能的未来发展趋势.html" style="font-size: 16px">趋势</a></li>
<li><a href="奥里给.html" style="font-size: 16px">历史</a></li>
</ul>
</li>
<li><a href="#">人工智能应用</a>
<ul>
<li><a href="医疗领域.html" style="font-size: 16px">国内</a></li>
<li><a href="#" style="font-size: 16px">国外</a></li>
</ul>
</li>
<li><a href="领域新闻.html">领域新闻</a></li>
<li><a href="#">人工智能介绍</a></li>
<li>
</ul></div>
</body>
</html>
在线咨询
