|
水平导航栏可以有两种实现方式：1、浮动；2、inline-block
浮动实现的技术点有: 1、浮动的技术原理 2、 浮动溢出的解决(BCF原理) 3、清除浮动的方法 inlind-block实现的技术点不过于把菜单项的display样式设置为inline-block即可，但是这时需要注意的是inline-block自带内间距和外间距，如果不希望这些间距影响排版的朋友，可以通过设置菜单项的{margin：0；padding:0;}得以解决。
现在介绍一下两种常见的菜单样式、实现方式和常见的问题。
悬浮单列下拉
这种样式是通过鼠标悬浮显示单列菜单的情况，这种实现方式一般通过ul和li元素实现，实现步骤如下： 1、建立容器
.top-container{
background: #fbfbfb;
height:30px;
min-width: 1500px;
border: 1px solid #e8e8e8;
font-family: 'Tahoma','simsun' !important;
color: #747d87;
margin: 0;
}
结果就是一个白色长条，就不截图了，这里需要注意就是各种浏览器对body的外边距实现不一，所以一般都要对body的样式里添加margin: 0; 2、建立导航栏容器
.top-wrapper {
width: 1450px;
height: 30px;
border: 1px solid red;
margin: auto;
}
结果就是居中的导航容器，其中margin:auto;用来水平居中，这个样式需要注意的是需要条件position:relative;和必须是块级元素  3、建立菜单项
站长之家
站长论坛
站长工具
ALEXA排名查询
百度权重查询
SEO概况查询
友情链接查询
Google PR查询
Whois信息查询
域名备案查询
站长素材
字体下载
高清壁纸
简历模板
高清图片
矢量素材
PSD素材
PPT模板
网站排行
行业网站排名
地区网站排名
手机版
工具旧版
SEO工具包
立即登录
立即注册
.top-left-nav,.user-nav {
display: inline-block;
border: 1px solid red;
height: 30px;
}
.nav {
display: inline-block;
margin: 0 auto;
padding: 0;
position: relative;
}
.nav:after {
content: "";
display: block;
clear: both;
visibility: hidden;
width: 0px;
height: 0px;
}
.nav ul ,.nav li {
display: block;
position: relative;
margin: 0px;
padding: 0px;
}
.nav a {
text-decoration: none;
display: block;
text-align: center;
margin: 0 auto;
}
.first-nav {
text-align: center;
display: block;
margin: 0 auto;
}
.sec-nav {
position: relative;
display: block;
text-align: center;
}
.top-left-nav .first-nav{
/*显示具体布局*/
width:130px;
line-height:30px;
}
这时的结果是这样的:  很明显ul列表是垂直排列了，这时就是浮动作用体现的时候了，修改first-nav的样式
.first-nav{
float: left;
text-align:center;
display: block;
margin:0 auto;
}
导航栏的雏形渐渐出现，但是拖在一级菜单项的蓝字怎么办呢？  添加样式：
.top-left-nav .sec-nav{
margin:0px;
display: none;
padding:5px 3px;
width: 130px;
z-index:2;
}
结果很满意，其中diplay:none;就是实现隐藏效果的关键一环，说到隐藏，为何不用visibility:hidden;呢?其实使用display:none;时，元素是不占据任何空间的，相当于就是删除了这个元素；而visibility:hidden;元素依旧占据空间，只是变成不可见的状态，也无法接受事件，例如不能点击、不能鼠标悬浮等。隐藏是实现了，但是怎么让它重新出现，实现下拉效果呢？
 既然我们设置display:none把元素隐藏了了，那就把display样式设置可见的样式就行了，添加样式
.top-left-nav .first-nav:hover .sec-nav {
display: block;
border: 1px solid #e8e8e8;
}
下拉样式已经实现，结果很不错，这里用到的是hover悬浮伪类，当鼠标悬浮元素之上时应用样式，刚才我们是利用display:none;隐藏元素的，所以可以直接通过display:block;使元素重新恢复。  代码到了这里，基本已经实现完成，全部代码如下:
测试
.top-container{
background: #fbfbfb;
height:30px;
min-width: 1500px;
border: 1px solid #e8e8e8;
font-family: 'Tahoma','simsun' !important;
color: #747d87;
margin: 0;
z-index:2;
}
.top-wrapper{
width:1450px;
height: 30px;
border: 1px solid red;
margin: auto;
}
.top-left-nav,.user-nav{
display: inline-block;
border: 1px solid red;
height: 30px;
}
.nav{
display: inline-block;
margin:0 auto;
padding:0;
position: relative;
}
.nav:after{
content:"";
display:block;
clear:both;
visibility: hidden;
width:0px;
height:0px;
}
.nav ul ,.nav li{
display: block;
position: relative;
margin:0px;
padding:0px;
}
.nav a{
text-decoration: none;
display: block;
text-align: center;
margin:0 auto;
}
.first-nav{
float: left;
text-align:center;
display: block;
margin:0 auto;
}
.sec-nav{
position: relative;
display: block;
text-align:center;
}
.top-left-nav .first-nav{
/*显示具体布局*/
width:130px;
line-height:30px;
}
.top-left-nav .sec-nav{
margin:0px;
display: none;
padding:5px 3px;
width: 130px;
}
.top-left-nav .first-nav:hover .sec-nav{
display: block;
border: 1px solid #e8e8e8;
}
站长之家
站长论坛
站长工具
ALEXA排名查询
百度权重查询
SEO概况查询
友情链接查询
Google PR查询
Whois信息查询
域名备案查询
站长素材
字体下载
高清壁纸
简历模板
高清图片
矢量素材
PSD素材
PPT模板
网站排行
行业网站排名
地区网站排名
手机版
工具旧版
SEO工具包
立即登录
立即注册
悬浮全下拉  这种样式跟上一种样式不同的地方在于，悬浮的时候全部二级菜单都会下拉，在悬浮的在菜单项会出现深色强调样式，这个需要js实现。这种一般利用dt和dd实现，因为是成块出现的。
首页
历史上的今天
百科冷知识
图解百科
分类
艺术
科学
自然
文化
地理
生活
社会
人物
经济
体育
历史
特色百科
数字博物馆
非遗百科
多肉百科
恐龙百科
城市百科
二战百科
用户
蝌蚪团
燃梦计划
百科任务
百科商城
权威合作
合作模式
常见问题
联系方式
手机百科
网页版
个人中心
观察html代码前4层元素，我们发现多了两个:nav-bar-bg，nav-bar-bg-top，这两层是实现下拉背景蓝色块的。我们来看看这两个新添加的元素的作用，先去除nav-bar-bg-top元素，结果如下： 
重新加上该元素，发现nav-bar-bg-top这个元素是实现遮挡nav-bar-bg元素的效果，从而实现导航栏一级菜单的蓝色背景。  上面提到这个样式悬浮下拉全部二级菜单项，并为其添加强调色的，这个实现方式需要借助js通过注册onmouseover鼠标悬浮事件实现。从html代码中我们可以看到，我们使用的是setOn函数，现在我们给出他的实现：
function setOn(num){
var e=document.getElementById("dl"+num);
if (haveClass(e,"nav-on")){
return;
}
for(var id = 1;id
for(var id = 1;id |