弹出式菜单制作。
【浏览效果】访问http：／／www．WUStwzx．com／webdesign／sj02—16b．html，当鼠标
位于某个菜单项上时，会弹出相应的次级菜单，鼠标离开时次级菜单消失，如图2—9所示。
【制作要点】
·定义多级的伪类样式；
图2 9纯CSS制作的弹出式菜单
·所有菜单项作为一个项目列表；
·每个菜单项的弹出式菜单又是一个项目列表并置于一表格(见第4章)内
·CSS定位属性Position；
·CSS可视属性Visibility。
【源代码】访问http：／／www．wustwzx．com／webdesign／sj02—16b．html。
<html>
(head>
(title>纯CSS制作的弹出式菜单<／title>
<style type=”text／css’’’
·{／·星号表示所有元素t／
margin：0，／+外填充’／
padding：0j／·内填充t／1
．menu{position：relativej z—index：100；}
．menu u1 1iI
font-size：14px；／+设定主菜单文字大小’／
list-style：none；／’设定列表无样式‘／
float：left；／·水平菜单’／
position：relative，
}
．menu table{
position：absolutej
top：0，left：0j／-列表菜单与主菜单项的距离+／}
．menu u11i ul f
visibility：hiddenj／t菜单项通常是不可见的·／
position：absolute，／’菜单项绝对定位·／
text—align：1eftj
1eft：3px；top：23px；
)
