菜单
代码思路说明：
1、一级菜单用静态文字，无需动作css即可完成；
2、二级以后的菜单，都需要额外的css代码：相对定位，鼠标跟随，展示与隐藏，模块化，列表化显示等待；
3、html代码做好菜单与子菜单之间的嵌套（可多级循环），并调用css代码；
4、完成。
效果图如下:
示例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商城分类导航菜单</title>
<style>
body{font-size: 14px; margin: 100px; padding: 0;}
.afcl{*zoom: 1;}
.afcl:after{content:''; display:block; clear:both; font-size:0; height:0; line-height:0; overflow:hidden;}
a {text-decoration:none;}
a:hover{color: #FF3300;}
.my_category{ border:solid 1px #b60134; background: #F2F2F2; width: 198px;}
.my_category .parent{position: relative; border-bottom: solid 1px #fff}
.my_category .parent p {margin: 0; border: solid 1px #F2F2F2; padding:0 5px 0 20px; height: 28px; line-height: 28px; background: url(dot.gif) no-repeat 8px 14px; cursor: pointer;}
.my_category .parent p a {color:#333333; font-size:14px; display: block;}
.my_category .parent p a:hover {color:#d6290b;}
.my_category .parent p s{background: url(dot.gif) no-repeat 5px -15px; width: 10px; height: 28px; display: block; position: absolute; right: 5px; top: 1px; z-index:99;}
.my_category .parent .subs{display: none; position: absolute; left: 192px; top: 0; background: #fff; z-index: 98; padding: 10px;}
.my_category .parent .subs dl{line-height: 30px; border-bottom: solid 1px #EEE; margin: 0; padding: 0;}
.my_category .parent .subs dt{font-weight: bold; margin: 0; padding: 0;}
.my_category .parent .subs dt a{color: #E4393C;}
.my_category .parent .subs dd {margin: 0; padding: 0;}
.my_category .parent .subs dd a{color: #666;}
.my_category .parent .subs dd a:hover{color: #E4393C;}
.my_category .parent .subs dt, .my_category .parent .subs dd{padding: 0 5px; display: block; float: left;}
.my_category .parent .subs dt a, .my_category .parent .subs dd a{border-right: solid 1px #EEE; padding-right: 5px;}
.my_category .activep .subs{display: block; border: solid 1px #DDD; width: 350px; box-shadow: 0 0 10px #DDDDDD}
.my_category .activep p{border: solid 1px #DDD; background-color: #fff; overflow: hidden; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; box-shadow: 0 0 8px #DDD;}
.my_category .activep p s{background: #fff;}
</style>
</head>
<body>
<div class="my_category">
<div class="parent" onmouseover="this.className='parent activep'" onmouseout="this.className='parent'">
<p><a href="javascript:;">一级分类-1</a><s></s></p>
<div class="subs">
<dl class="afcl">
<dt><a href="javascript:;">二级分类-1</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
<a href="{$childer.url}">三级分类-3</a>
</dd>
</dl>
<dl class="afcl">
<dt><a href="javascript:;">二级分类-2</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
</dd>
</dl>
<dl class="afcl">
<dt><a href="javascript:;">二级分类-3</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
</dd>
</dl>
</div>
</div>
<div class="parent" onmouseover="this.className='parent activepAƆ|{©�#›•l\¢諲ut="this.className='parent'">
<p><a href="javascript:;">一级分类-2</a><s></s></p>
<div class="subs">
<dl class="afcl">
<dt><a href="javascript:;">二级分类-1</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
<a href="{$childer.url}">三级分类-3</a>
</dd>
</dl>
<dl class="afcl">
<dt><a href="javascript:;">二级分类-2</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
</dd>
</dl>
<dl class="afcl">
<dt><a href="javascript:;">二级分类-3</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
</dd>
</dl>
</div>
</div>
<div class="parent" onmouseover="this.className='parent activep'" onmouseout="this.className='parent'">
<p><a href="javascript:;">一级分类-3</a><s></s></p>
<div class="subs">
<dl class="afcl">
<dt><a href="javascript:;">二级分类-1</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
<a href="{$childer.url}">三级分类-3</a>
</dd>
</dl>
<dl class="afcl">
<dt><a href="javascript:;">二级分类-2</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
</dd>
</dl>
<dl class="afcl">
<dt><a href="javascript:;">二级分类-3</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
</dd>
</dl>
</div>
</div>
<div class="parent" onmouseover="this.className='parent activep'" onmouseout="this.className='parent'">
<p><a href="javascript:;">一级分类-4</a><s></s></p>
<div class="subs">
<dl class="afcl">
<dt><a href="javascript:;">二级分类-1</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
</dd>
</dl>
<dl class="afcl">
<dt><a href="javascript:;">二级分类-2</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
</dd>
</dl>
<dl class="afcl">
<dt><a href="javascript:;">二级分类-3</a></dt>
<dd>
<a href="{$childer.url}">三级分类-1</a>
<a href="{$childer.url}">三级分类-2</a>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
越努力越幸运
