注意事项：
了实现导航中的子导航与主导航在实现鼠标交互的同时，保持其相对位置一致，我们使用了对ul li{}使用了position:relative;使其定位方式转为相对定位。而对li ul{}即子导航采用了position:absolute;相对于导航的绝对定位方式，了其鼠标交互后的位置一致。
纵向导航菜单
我们先看一下代码结构：
<div id="nav">
<h1>CSS</h1>
<h2><a href="#">css入门</a></h2>
<h2><a href="#">css进阶</a></h2>
<h2><a href="#">css高级</a></h2>
<h1>webUI</h1>
<h2><a href="#">理论知识</a></h2>
<h2><a href="#">实战应用</a></h2>
<h2><a href="#">高级技巧</a></h2>
<h1>DOM</h1>
<h2><a href="#">DOM入门</a></h2>
<h2><a href="#">DOM应用</a></h2>
<h2><a href="#">DOM与浏览器</a></h2>
<h1>XHTML</h1>
<h2><a href="#">参考手册</a></h2>
<h2><a href="#">交流论坛</a></h2>
</div>
从以上可以看出，这次的XHTML部分的代码横向代码略有不同，我们没有继续使用ul和li标签，其实继续使用ul元素也能完好的实现纵向�
盒模型，是XHTML
+CSS
布局
页面中的
核心！是关系到设计中排版定位的关键，都遵循盒模型规范，例如<div>、<p>、<a>……盒模型包含
(外
边距)margin，(内边距)padding ，(内容)content，(边框)border。
下图是CSS盒模型的示意图
这些属性我们可以把它转移到我们日常生� ......
