在页面表单中,分别展示某类产品的全部子类项,当用户将鼠标移动某子类时,所选子类样式发生变化,并在该子类的右边以浮动的形式展示该类的全部产品:当用户将鼠标移除某子类时,所选子类样式恢复到初始值,同时,隐藏已显示的全部子类产品。
实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>列表中的导航菜单应用</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<style type="text/css">
body{
font-size:13px}
ul,li{
list-style-type:none;padding:0px;margin:0px}
.menu{
width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
.optn{
width:190px;line-height:28px;border-top:dashed 1px #ccc}
.content{
padding-top:10px;clear:left}
a{
text-decoration:none;color:#666;padding:10px}
.optnFocus{
background-color:#fff;font-weight:bold}
div{
padding:10px}
div img{
float:left;padding-right:6px}
span{
padding-top:3px;font-size:14px;font-weight:bold;float:left}
.tip{
width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;
background-color:#fff;display:none}
.tip li{
line-height:23px;}
#sort{
position:absolute;display:none}
</style