通过JavaScript来进行导航的添加，实际上就是对position的绝对定位和相对定位的理解。

分为两个方面，一个PC端的，一个手机端的。

通过响应式来处理手机端的代码样式改写。

我还是针对本站http://study.caisangzi.com进行改写导航改写：

pc端原导航代码：

<nav class="pc">
	<ul class="clearfix">
		<li><a href="/">首页</a></li>
		<?php foreach ($menu as $k => $v): ?>
		<li>
		    <a href="<?php echo $v['url']; ?>"><?php echo $v['name']; ?></a>
		</li>	
		<?php endforeach ?>
	</ul>
</nav>

然后我们要在li的层级里面加上一个绝对定位的块，作为弹出层。

<nav class="pc">
	<ul class="clearfix">
		<li><a href="/">首页</a></li>
		<?php foreach ($menu as $k => $v): ?>
		<li>
			<a href="<?php echo $v['url']; ?>"><?php echo $v['name']; ?></a>
			<div class="pop">
				<ul>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
					<li><a href="">二级菜单</a></li>
				</ul>
			</div>
		</li>	
		<?php endforeach ?>
	</ul>
</nav>

然后我们为了操作容易，加上了一些代码样式，同时把主导航的li，属性加上position:relative;

nav ul li {
    position:relative;
    float: left;
    width: auto;
    margin: 0 10px;
}

nav .pop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

nav .pop .children {
    display: block;
}

html代码

<nav class="pc">
	<ul class="clearfix">
		<li><a href="/">首页</a></li>
		<?php foreach ($menu as $k => $v): ?>
		<li>
			<a href="<?php echo $v['url']; ?>"><?php echo $v['name']; ?></a>
			<div class="pop">
				<ul class="clearfix">
					<li class="children"><a href="">二级菜单</a></li>
					<li class="children"><a href="">二级菜单</a></li>
					<li class="children"><a href="">二级菜单</a></li>
					<li class="children"><a href="">二级菜单</a></li>
					<li class="children"><a href="">二级菜单</a></li>
				</ul>
			</div>
		</li>	
		<?php endforeach ?>
	</ul>
</nav>

然后我们修正弹出层的样式

nav ul li:hover .pop{
    display: block;
}

nav .pop {
    z-index: 299;
    display: none;
    position: absolute;
    background: #fff;
    top: 50px;
    left: 0;
    box-shadow: 10px 10px 5px #888888;
}

nav .pop ul {
    color: #fff;
    width: auto;
    line-height: 35px;
    min-width: 150px;
}

nav .pop .children {
    float: none;
    position: static;
    display: block;
    text-align: left;
}

nav .pop .children a {
    text-align: center;
    color: #333;
    font-size: 0.8em;
}

使用伪类的方式来处理是比较快的方案。

nav ul li:hover

这样的话我们的样式就完全完毕了，如果导航迟迟显示不出来，建议查看父类是否有overflow:hidden;的情况。

PC部分就先到这里，然后我会继续移动端的修改。