下面介绍水平菜单的另一种制作方法。
【制作要点】
·用项目列表的列表项表示水平菜单项;
·设置列表项的定位方式;
·定义多级的超链接标记<A>的样式menu ul li a及伪类样式menu ul li a
hover。
【源代码】访问http://www.WtlStWZX.com/webdesign/sj02—16aa.html。
<htmI>
<head>
<title>纯CSS制作的水平菜单</title>
<style type。”text/css”’
t{/t星号表示所有元素t/
margin:0j/t外填充t/
padding:O;/t内填充’/)
.menu ulli{
font-size:14px;/·设定主菜单文字大小t/
float:left;/·实现项目列表的列表项的水平放置t/J
.menu ul li af
display:blockj
border:ipx solid●aaaj
background:red;/t主菜单的背景。/
padding:2px 10px;
margin:3pxjCOlor:#fff,
text—decoration:none,}
.menu 1i a:hover{
background:If2cdbOj
color:ff00;
border:Ipx;text—decoration:underline,
s01id redj}
</style>
(/head>
<body>
<div class=”menu’’>
<ul><!—-菜单被看作为一个项目列表—·>
<li><a href=…t>超文本标记与样式基础</a></li>
(1i><a href=…·>客户端脚本</a></li>
<li><a href=…·>建站技术<la></li>
(/ul’
</div’
</body>
(/html’