*{margin: 0px;padding: 0px;}
a{text-decoration: none;color: #000}
.clear{clear: both;}
.header_nav{width: 1400px;height: 80px;background-color: #F5F5F5;}
.nav_left{height: 80px;width: 400px;float: left;}
.logo{height: 37px;width: 120px;margin-top: 12px;margin-left: 55px;}
.logo_span{margin-left: 55px;}
.logo_txt{border: 3px solid;width: 138px;height: 22px;margin-left: 195px;}
.nav_center{height: 80px;width: 600px;float: left;}
.nav_center ul{list-style: none;display: none;position: absolute;}
.nav_center ul li{text-align: center;line-height: 60px;width: 100px;height: 60px;}
.nav_center ul li:hover{background-color: #00D094;}
.nav_a{display: inline-block;width: 100px;text-align: center;line-height: 80px;font-size: 18px;position: relative;}
.nav_a:hover{border-bottom: 3px solid #00D094;}
.nav_a:hover ul{display: block; border: 2px solid #F5F5F5;border-top:none;}
.nav_right{height: 80px;width: 400px;float: left;}
.nav_right_a{text-align: center;display: inline-block;line-height: 40px;width: 120px;background-color: #00D094;height: 40px;
color: #fff;margin-top: 20px;margin-left: 20px;border-top-left-radius: 40%;border-bottom-right-radius:50%; }<!DOCTYPE html>
<html>
<head>
<title>导航栏浮动案例</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="header_nav">
<div class="nav_left">
<img src="images/logo.png" class="logo">
<div class="logo_span">人工智能名片</div>
<div class="logo_txt">做最好的名片</div>
</div>
<div class="nav_center">
<a href="#" class="nav_a">首页</a>
<a href="#" class="nav_a">产品中心</a>
<a href="#" class="nav_a">服务案例</a>
<a href="#" class="nav_a">新闻资讯
<ul>
<li>行业新闻</li>
<li>企业动态</li>
</ul>
</a>
<a href="#" class="nav_a">关于我们</a>
</div>
<div class="nav_right">
<a href="#" class="nav_right_a">立即登陆</a>
<a href="#" class="nav_right_a">免费注册</a>
</div>
<div class="clear"></div>
</div>
</body>
</html>
