接下来修改css样式表,先修改#menu ul li,给其增加一个 position:relative;属性
定义display:none后,默认状态下将隐藏
定义#menu ul li ul的position: absolute; left: 100px; top: 0px;,那么它将以相对于它父元素li的上为0,左为100的位置显示。最后我们设置当鼠标划过后显示下级菜单的样式
#menu ul li:hover ul这个样式比较难理解,它的意思是定义ID为menu下ul下li,当鼠标划过时ul的样式,这里设置为display:block,指的是鼠标划过时显示这块内容,这也实现我们今天想要的效果。其中的:hover和前边说的链接一样,同属于伪类,但有一点注意,目前IE6只支持a的伪类,其它标签的伪类不支持,所以要想在IE6下也显示正确,需要借助js来实现,我们定义一个类.current (自己命名,需和JS中相同)的属性为display:block;然后当鼠标划过后,用JS给当前li添加上这个样式上,根据css的优先级:指定的高于继承的原则,就实现了IE6下的正确显示。所以需要加上JS和样式#menu ul li.current ul { display:block;}。
总的样式代码如下:
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
img { border-style: none; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }
#menu ul li.current ul { display:block;}
#menu ul li:hover ul { display:block;}
</style>