对于此项技术的实现，我们首相应该勾勒出，菜单的每一个动作，即每个动作产生了什麽效果；以动画产生的理论来指导；
<div>
<ul id="mainNav">
<li><a href="\">主页</a></li>
<li><a href="#">华人男星</a>
<ul>
<li>周杰伦(Jay Chou)</li>
<li>王力宏(Wang, Li Hong)</li>
<li>张学友(Cheung, Hok Yau Jacky)</li>
</ul>
</li>
<li><a href="#">华人女星</a>
<ul>
<li>蔡依林(Tsai, Yi Lin Jolin)</li>
<li>张韶涵(Zhang Shao Han)</li>
<li>梁静茹(Liang, Ching Ju)</li>
</ul>
</li>
<li><a href="#">华人组合</a>
<ul>
<li>S.H.E</li>
<li>False</li>
<li>AlarmBeyond</li>
</ul>
</li>
<li><a href="#">日韩男星</a>
<ul>
<li>安七炫</li>
<li>Rain</li>
<li>张佑赫</li>
</ul>
</li>
</ul>
</div>
这里我们用到一个js文件 文件的内容是
navHover = function() {
var lis = document.getElementById("mainNav").getElementsByTagName("LI")
for (var i=0i<lis.lengthi++) {
lis[i].onmouseover=function() {
this.className+=" iehover"
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "")
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover)
首先介绍下 window.attchEvent 的作用 为一个指定指定事件指定一个处理函数
那么上面的那句 就是 为onload的事件指定一个处理函数 navHover；下来看看此函数的作用 就是首先获得指定id的对象下的Li对象，并为每个对象的onmouseover 和 onmouseout 事件 再指定一个处理过程，这个过程即为每个Li动态的建立或取消iehover类；
第一步就是先建立向上面那样出现的一堆 ul 和襄套的 li ，下来开始建立css；
ul#mainNav {
list-style:none
font: bold 1em Verdana, Arial, Helvetica, sans-serif
line-height:1.5em
text-align:center
}
ul#mainNav li{
width:300px
list-style:none
display: inline
position: relative
border:1px solid #33FF66
}
ul#mainNav a{
padding:6px 3px
padding-left:10px
width:auto
}
ul#mainNav ul,
ul#mainNav li.iehover ul ul,
ul#mainNav li.iehover ul ul ul,
ul#mainNav li.iehover ul ul ul ul{
display:none
position:absolute
top:1.95em
}
ul#mainNav li.iehover ul,
ul#mainNav li.iehover li.iehover ul,
ul#mainNav li.iehover li.iehover li.iehover ul,
ul#mainNav li.iehover li.iehover li.iehover li.iehover ul{
position:absolute
display:block
left:0
}
ul#mainNav li.iehover ul li{
display:list-item
background:red
position: relative
left:auto
}
ul#mainNav li.iehover li.iehover ul li,
{
position: relative
left:100%
top:-32px
}
上面为要建立联动菜单的css规则
首先我们要建立 完成 如图所示的规则
看到的效果 就是让 ul#mainNav 下的 li 以行的方式显示
那么就靠这条规则
* {
margin:0
padding:0
text-decoration: none/*全局设置*/
}
ul#mainNav li{
width:300px
list-style:none/*列表类型无*/
display: inline
position: relative相对定位
border:1px solid #33FF66/*绿色的边框*/
}
由于css的继承 若后代不设置此类 规则 后代的 li 将都受此规则约束
仅使用此两条规则可能还完成不了任务，由于ul li 下还有很多 ul li 他将占用 首行空间 那么就要让 他们不显示
ul#mainNav ul,
ul#mainNav li.iehover ul ul,
ul#mainNav li.iehover ul ul ul,
ul#mainNav li.iehover ul ul ul ul{
display:none/*display 不显示 */
position:absolute/* 绝对定位 距顶1.95个字体距离*/
top:1.95em
}
这时候，我们应该能看到一行条了吧，对于 后面一堆
ul#mainNav li.iehover ul ul,
ul#mainNav li.iehover ul ul ul,
ul#mainNav li.iehover ul ul ul ul 这规则，你是不是感到疑惑
这里我们先忽略，在继续想下来，按效果及产生的动作一步一步的来，下来该干什么了，就是要把鼠标放在条子上找我们要着的，例如歌手吧~，比如找周杰伦，拿鼠标移动上去后会发生什么动作类，那就是列出，华人歌手让我们看，即显示下一及目录，我们看看他所在的层叠关系，
是ul#mainNav ul 下是不
ul#mainNav li.iehover ul,
ul#mainNav li.iehover li.iehover ul,
ul#mainNav li.iehover li.iehover li.iehover ul,
ul#mainNav li.iehover li.iehover li.iehover li.iehover ul{
position:absolute
display:block
left:0
}
多了个li.iehover 那是什么意思，就是我们鼠标点在当行条的时候的产生的一系列效果，
加上这个规则在看看效果~。当我们放到华人男星上 是不是看见周杰伦了。
可是我们点不住它这是咋回事类。是因为 导航与 下一层的距离太大 导致当鼠标离开导航时，使li 不再具有iehover 的类了 ，即它不显示了，下来要处理的问题就是距离了。
ul#mainNav a{
padding:6px 3px
padding-left:10px
width:auto
}
这条规则就是增加填充内容与边框的距离，加上规则后看看效果吧、
此时他们发现消失的问题解决了 但又带来了新的问题，就是ul之间重叠了，那么就设置所有ul之间的距离
看如下规则 ul之间的距离 可以设置 上面的padding 变小 看效果设置 我的是5个px
现在看到的效果就是一个y轴列表了
方法多多，看你怎么用，css 就不写了，光看 dl 你应该知道如何做了：-----------------------------------------------------------------------
<h3>站内通知</h3>
<dl>
<dt>关于离退休人员领取中秋月饼的通知 2012-09-01<dt>
<dd>本公司离退休人员可凭退休证于2012年10月1日前到工会张主任处领取月饼一盒，请相互通知转告!</dd>
<dt>公司上市在职职工购买原始股优惠方案出台<dt>
<dd>公司在职人员(不含退休及非正式工)每人可以市场发行价格的20%认购公司股票，每人最多认购10万股；</dd>
</dl>
--------------------------------------------
你可以把下面 3 个或更多 dl 加上 float 属性浮动成一排横向的，并给 dl 上加相对定位属性，再把每个 dl 里面的 dt、dd 用绝对定位做成显示为 dd 图片在上，dt 图片名字在下面的形式定位在 dl 里面合适的位置，然后用 js 做横向循环无缝滚动图片代码。
<dl>
<dt>图片1</dt>
<dd><img src="pic.jpg" alt="你的图片" /></dd>
</dl>
<dl>
<dt>图片2</dt>
<dd><img src="pic.jpg" alt="你的图片" /></dd>
</dl>
<dl>
<dt>图片3</dt>
<dd><img src="pic.jpg" alt="你的图片" /></dd>
</dl>
可以使用弹性布局，display: flex 就可以让div横排，默认布局轴方向就是横向，justify-content: space-between可以是div平均分布在水平轴上。
