CSS+HTML如何实现顶部导航栏.pdfVIP

CSS+HTML如何实现顶部导航栏 本篇⽂章给⼤家介绍⼀下CSS+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;/*离顶部的距离为0*/ margin-bottom: 5px; } .top ul{ /* 清除ul标签的默认样式 */ width: auto;/*宽度也改为⾃动*/ list-style-type: none; white-space:nowrap; overflow: hidden; margin-left: 5%; /* margin-top: 0; */ padding: 0; } .top li { float:left; /* 使li内容横向浮动，即横向排列 */ margin-right:2%; /* 两个li之间的距离*/ position: relative; 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{ /* ⼆级菜单li内容的显⽰ */ float:none; text-align: center; } .top ul li:hover ul{ /* ⿏标选中⼆级菜单内容时 */ display: block; } body{ background:#eff3f5; } /style body div class=top center ul lia href=#⼀级菜单/a/li lia href=#⼀级菜单/a/li lia href=#⼀级菜单/a/li lia href=#b⼀级菜单/b/a/li lia href=#⼀级菜单/a/li li a href=#⼀级菜单/a ul lia href=#⼆级菜单/a/li lia href=#⼆级菜单/a/li /ul