.clearfix::after {
display: block
content: ""
clear: both
}
ul,
li {
list-style: none
}
.nav>li {
float: left
margin: 0 10px
}
.nav>li ul {
display: none
}
</style>
</head>
<body>
<ul class="nav clearfix">
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
//案例分析：导航栏里面的li都要有鼠标经过效果 所以需要循环注册鼠标事件
//核心原理：当鼠标经过li里面的第二个孩子ul显示 当鼠标离开 ul隐藏
var nav = document.querySelector('.nav')
var lis = nav.children
for (var i = 0 i < lis.length i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block'
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none'
}
}
</script>
一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下：<div class="nav">这里是导航所在的DIV容器。</div>
CSS代码：
.nav{
position:fixed/* 绝对定位，fixed是相对于浏览器窗口定位。 */
top:0/* 距离窗口顶部距离 */
left:0/* 距离窗口左边的距离 */
width:100%/* 宽度设置为100% */
height:40px/* 高度 */
z-index:99/* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
设置方式，原理及大致内容请看css代码注释。
