这篇文章主要介绍了CSS+HTML实现顶部导航栏的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
html有什么特点
1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
导航栏的实现、固定顶部导航栏、二级菜单实现
效果图：
最近在使用这个导航栏的时候，发现页面在放大和缩小的情况下，导航栏的布局和显示都有些小问题，所以重新改了一下css部分的代码，重新贴上来
新的代码实现（优化布局）：
<html> <head> <style type="text/css"> .top{ height: auto; width:100%; margin-left: 0; background:rgb(189, 181, 181); position: fixed; top: 0; margin-bottom: 5px;}.top ul{ width: auto; list-style-type: none; white-space:nowrap; overflow: hidden; margin-left: 5%; padding: 0;}.top li { float:left; margin-right:2%; position: relative; overflow: hidden;}.top li a{ display: block; color:white; text-align: center; padding: 3px; overflow: hidden; text-decoration: none; }.top li a:hover{ background-color: #111;}.top ul li ul{ margin-left: -0.2px; background:rgb(189, 181, 181); position: relative; display: none; }.top ul li ul li{ float:none; text-align: center;}.top ul li:hover ul{ display: block;}body{ background:#eff3f5;} </style> <body> <div class="top"> <center> <ul> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> <li><a href="#"><b>一级菜单</b></a></li> <li><a href="#">一级菜单</a></li> <li> <a href="#">一级菜单</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> </ul> </center> </div> </body> </head></html>下面的原来的代码实现（页面放大缩小的时候导航版排版有问题）：
<html> <head> <style type="text/css"> .top{ height: 50px; width:100%; background:rgb(189, 181, 181); position: fixed; top: 0; } .top ul{ width: 80%; list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .top li { float:left; margin-right:50px; } .top li a{ display: block; color:white; text-align: center; padding: 14px 16px; text-decoration: none; } .top li a:hover{ background-color: #111; } .top ul li ul{ width: auto; background:rgb(189, 181, 181); position: absolute; display: none; } .top ul li ul li{ margin-right:0; float:none; text-align: center; } .top ul li:hover ul{ display: block; } </style> <body> <div class="top"> <center> <ul> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> <li><a href="#">一集菜单</a></li> <li><a href="#"><b>一级菜单</b></a></li> <li><a href="#">一级菜单</a></li> <li> <a href="#">一级菜单</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> </ul> </center> </div> </body> </head></html>感谢你能够认真阅读完这篇文章，希望小编分享的“CSS+HTML实现顶部导航栏的方法”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
