最简单的多级菜单

作者:Java伴侣日期:2007-07-18

字体大小: 小中大

CSS+JS+HTML。虽说简单，但还是蛮漂亮的

HTML代码

<html>
<style type="text/css"> 
<!-- 
*{margin:0;padding:0;border:0px none;} 
body { 
font-family: arial, 宋体, serif; 
font-size:12px; 
}

#nav { 
line-height: 24px; list-style-type: none; background:#666; 
} 
#nav a { 
display: block; width: 80px; text-align:center; 
} 
#nav a:link { 
color:#666; text-decoration:none; 
} 
#nav a:visited { 
color:#666;text-decoration:none; 
} 
#nav a:hover { 
color:#FFF;text-decoration:none;font-weight:bold; 
} 
#nav li { 
float: left; width: 80px; background:#CCC; 
} 
#nav li a:hover{ 
background:#999; 
} 
#nav li ul { 
line-height: 27px; list-style-type: none;text-align:left; 
left: -999em; width: 180px; position: absolute; 
} 
#nav li ul li{ 
float: left; width: 180px; 
background: #F6F6F6; 
}

#nav li ul a{ 
display: block; width: 180px;text-align:left;padding-left:24px; 
} 
#nav li ul a:link { 
color:#666; text-decoration:none; 
} 
#nav li ul a:visited { 
color:#666;text-decoration:none; 
} 
#nav li ul a:hover { 
color:#F3F3F3;text-decoration:none;font-weight:normal; 
background:#C00; 
} 
#nav li:hover ul { 
left: auto; 
} 
#nav li.sfhover ul { 
left: auto; 
} 
#content { 
clear: left; 
}

--> 
</style> 
<script type=text/javascript><![CDATA[//><!]]></script> 
</head> 
<body>

<ul id="nav"> 
<li><a href="#">食品安全信息</a> 
<ul>

</ul> 
</li> 
<li><a href="#">政策法规</a> 
<ul>

</ul> 
</li> 
<li><a href="#"> 知识库</a> 
<ul> 
<li><a href="#">案例三</a></li> 
<li><a href="#">案例</a></li> 
<li><a href="#">案例三案例三</a></li> 
<li><a href="#">案例三案例三案例三</a></li> 
</ul> 
</li> 
<li><a href="#">安全案例</a> 
<ul>

</ul> 
</li> 
<li><a href="#">安全预警</a> 
<ul>

</ul> 
</li> 
<li><a href="#">安全常识</a> 
<ul>

</ul> 
</li> 
<li><a href="#">食品投诉</a> 
<ul>

</ul> 
</li> 
<li><a href="#">预警决策</a> 
<ul>

</ul> 
</li> 
<li><a href="#">管理系统登陆</a> 
<ul>

</ul> 
</li> 
</ul> 
</body> 
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: CSS

相关日志:

评论: 0 | 引用: 0 | 查看次数: 823

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字记住我的信息,以便下次评论时不用输入用户名.

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号. 字数限制 1000 字 \| UBB代码开启 \| [img]标签关闭

最简单的多级菜单

作者:Java伴侣日期:2007-07-18

Search

SweetTitles

User Panel

Recent Comments

Archive

最简单的多级菜单

作者:Java伴侣 日期:2007-07-18

Search

SweetTitles

User Panel

Recent Comments

Archive

作者:Java伴侣日期:2007-07-18