<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公司简介导航栏</title>
<style>
/* 对浏览器自带样式清除 */
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
nav {
width: 100%;
height: 50px;
background-color: rgb(59, 119, 197);
text-align: center;
}
/* 对a的样式设置 */
nav a {
display:block;
text-decoration: none;
width: 120px;
font:15px/50px "";
letter-spacing: 1px;
color: rgb(240, 240, 240);
}
nav>ul>li:hover>a{
background-color: rgb(40, 79, 131);
}
/* 去除列表样式 */
li{
list-style: none;
}
nav>ul {
width: 1000px;
margin: 0 auto;
}
/* 向左浮动 */
nav>ul>li {
float: left;
}
/* 中间细线的制作 利用渐变 */
.line {
display: inline-block;
width: 2px;
height: 50px;
}
.line::before {
content: "";
display: inline-block;
width: 1px;
height: 50px;
background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.line::after {
content: "";
display: inline-block;
width: 1px;
height: 50px;
background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
/* 对下拉菜单的设置 */
nav .sub{
background-color: rgba(46, 93, 155, 0.973);
display: none;
}
nav li:hover>.sub{
display: block;
}
nav .sub>li:hover{
background-color: rgb(39, 78, 129);
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">首页</a></li>
<li class="line"></li>
<li><a href="">公司简介</a></li>
<li class="line"></li>
<li><a href="">业界新闻</a></li>
<li class="line"></li>
<li><a href="">产品中心</a>
<ul class="sub">
<li><a href="">热点产品</a></li>
<li><a href="">特价产品</a></li>
<li><a href="">最新产品</a></li>
<li><a href="">降价产品</a></li>
</ul>
</li>
<li class="line"></li>
<li><a href="">会员下载</a></li>
<li class="line"></li>
<li><a href="">联系我们</a>
<ul class="sub">
<li><a href="">热点产品</a></li>
<li><a href="">降价产品</a></li>
</ul>
</li>
<li class="line"></li>
<li><a href="">联系我们</a></li>
<li class="line"></li>
<li><a href="">联系我们</a></li>
</ul>
</nav>
</body>
</html>
