现在比较流行的三级菜单，京东商城，淘宝网效果等等。（修正版）

首先想关注过我的朋友们表示歉意。由于疏忽文章写的有点杂乱。修正我整理了一下。代码不是主要的在于一些话的分享。技术只是抛砖引玉了一下。

顺便和大家分享一些文字。

先看一下效果图View Code CSS样式：
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend
{
margin: 0; padding: 0;
}

ol, ul{ list-style: none;}
:focus{ outline: 0;}
a img{ border: 0;}
img{ vertical-align: middle; }
table{ empty-cells: show; width: 100%; height: 24px;}
ins{ text-decoration: none;}
del{ text-decoration: line-through;}
em{ font-style: normal;}
.fl{ float: left;}
.fr{ float: right;}
.fn{ float: none;}
.al{ text-align: left;}
.ac{ text-align: center;}
.ar{ text-align: right;}
.clr
{
display: block;
overflow: hidden;
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{ display: inline-table;}
/* Hides from IE-mac \*/*html .clearfix{ height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */* + html .clearfix{ min-height: 1%;}
.overflow{ overflow: hidden;}
.form label, .form input, .form select, .form textarea, .form button, .form .label
{
float: left;
font-size: 12px;
}
.block{ display: block; overflow: hidden; cursor: pointer;}
.hide{ display: none;}
.invisible{ visibility: hidden;}
.tab{ overflow: hidden; zoom: 1;}
.tab li, .tab a, .tab-item
{ float: left;
cursor: pointer;
text-align: center;
}
.m, .mt, .mc, .mb{ overflow: hidden; zoom: 1;}
.mt .extra{ float: right;}
.m{ margin-bottom: 10px;}
.btn-img{cursor: pointer; margin: 0; padding: 0; border: 0; text-align: center;}
.btn-text{ cursor: pointer; margin: 0; padding: 0; text-align: center;}
/*text*/
body{ font-family: "宋体" ,Arial,Lucida,Verdana,Helvetica,sans-serif; font-size: 12px; color: #333; line-height: 150%; background: #fff;}
h1{ font-size: 20px;font-family: Arial,Lucida,Verdana, "宋体" ,Helvetica,sans-serif;}
h2{ font-size: 14px;}
h3{ font-size: 14px;}
h4{ font-size: 12px;}
h5{ font-size: 12px;}
h6{ font-size: 12px;}
/*link*/
a:link, a:visited{ color: #333; text-decoration: none;}
a:hover{ color: #c00; text-decoration: underline;}
#header{ margin-bottom: 7px; height: 22px;}

/*allsort*/
/* 定位 */
.allsort
{
float: left;
width: 141px;
height: 600px;
margin-right: 4px;
background-color :#D2E0F2;
background: no-repeat 0 -166px;
position: relative;
z-index: 11;
left: 9px;
top: 56px;
background : url(../Login/dl-Image/1-3-150.jpg) repeat-y;

}
.allsort .mt
{
height: 25px;
width: 141px;
line-height: 25px;
background: url(../Login/dh/1-2-h.jpg) no-repeat;
cursor: pointer;

}
/* <strong>导航菜单</strong>字体控制*/
.allsort .mt strong
{
float: left;
font-size: 14px;
color: #630;
width: 140px;
height: 25px;
text-align :center;
}
#o-search .allsort .mt a
{
color: #630;
}
.allsort .mt .extra
{
display: none;
}
/*大菜单单框 */
.allsort .mc
{
border: 0px solid #D2E0F2;
position: absolute;
top: 30px;
overflow: visible;
width: 135px;
padding: 0 3px 0;
-moz-border-radius: 0 0 0px 0px;
-webkit-border-radius: 0 0 0px 0px;
left :-3px;
height: 315px;
}
.allsort .item
{
width: 140px;
height: 33.5px;
background: url(../Login/dh/1-2-33px.jpg) no-repeat;
border-top: 0px solid #f4f3f0;
}
.allsort .fore
{

border-top: none;
}
.allsort span
{

display: block;
width: 150px;
position: relative;
z-index: 1;
}
/* 导航字体、长和高 */
.allsort h3
{
width: 98px;
height: 31px;
padding-left: 40px;
border: 0px solid #DCF1F0;

border-width: 0px 0 0px 0px;
background: no-repeat -318px -240px;
font-weight: normal;
}
.allsort h3 a:link, .allsort h3 a:visited
{

display: block;
height: 30px;
line-height: 30px;
color: #333;
}
.allsort h3 a:hover, .allsort h3 a:active
{
color: #f6b704;
}
.allsort s
{
display: block;
position: absolute;
top: 10px;
left: 182px;
width: 13px;
height: 13px;
background: no-repeat -274px -216px;
}
/* 边框颜色*/
.allsort .item .i-mc
{
display: none;
position: absolute;
left: 141px;
top: 0;
width:420px;
border: 1px solid #f6b704;
background : url(../Login/dl-Image/1-3-488px.jpg) ;
overflow: hidden;
}
.allsort .item dt
{
padding: 3px 10px 0 0;
font-weight: bold;
}

.allsort .item dd
{
padding: 3px 0 0;
overflow: hidden;
zoom: 1;
}

.allsort .subitem
{
float: left;
width: 500px;
min-height: 370px;
padding: 0 4px 0 8px;
}

.subitem.left
{
float:left ;
width :550px;
height :70px;
display: none;
position: absolute;

}
.allsort .subitem dl
{
border-top: 0px solid #f6b704;
padding: 6px 0;
overflow: hidden;
zoom: 1;
}

.allsort .subitem .fore
{
border-top: none;
}
/* 二级菜单控制*/
.allsort .subitem dt
{
float: left;
width:65px;
line-height: 22px;
text-align: right;
}
.allsort .subitem dd
{
float: left;
width: 380px;
}
/* 二级菜单颜色控制*/
.allsort .subitem dt a
{
color: #c00;
}
/*设置功能列表分割标示*/
.allsort .subitem dd a
{
border-right :#f6b704 1px solid;
border-left::#f6b704 1px solid;
padding: 0 5px;
margin-bottom: 5px;
text-decoration: underline;
display: inline-block;
line-height: 15px;
}
/*去掉后会换行
.allsort .subitem em
{
float: left;
height: 14px;
margin: 4px 0;
line-height: 14px;
padding: 0 10px;
border-left: 0px solid #f6b704;
} */

#o-search .allsort .subitem dt a
{
color: #c00;

}
#o-search .allsort .subitem dd a
{
white-space: pre-wrap ;
}
.allsort .fr
{
background: #fff;
width: 176px;
padding-bottom: 2010px;
margin-bottom: -2000px;
}
.allsort .fr dl
{
padding-bottom: 0;
}
#o-search .allsort .fr a
{
color: #666;
}
.allsort .brands
{
width: 140px;
padding: 6px 8px;
}
.allsort .brands em
{
float: left;
width: 80px;
}
.allsort .brands dd
{
padding-top: 6px;
line-height: 20px;
}
.allsort .promotion
{
width: 140px;
padding: 6px 8px;
}

.allsort .promotion dd
{
padding-top: 6px;
line-height: 20px;
}
.allsort .mc .extra
{
padding: 7px 8px;
background: #FDF1DE;
border-top: 0px solid #f6b704;
}

#o-search .allsort .mc .extra a
{
color: #c00;
}
/*w为负数时鼠标移上后会会出现底线。*/
.allsorthover
{
background-position: 0 166px;
}
.allsorthover .mt .extra
{
background-position: -274px -190px;
}
.allsorthover .mc
{
display: block;
}
.allsort .hover span
{
z-index: 13;
width: 140px;
}
/* 鼠标移动上去后大菜单变化样式*/
.allsort .hover h3
{
border: solid #f6b704;
border-width: 1px 0 1px 1px;
overflow: hidden;
background: #FFF9EF no-repeat -318px -172px;
font-weight: bold;
}
.allsort .hover s
{
display: none;
}
.allsort .hover .i-mc
{
display: block;
z-index: 12;
}
*html .allsort .item dd
{
padding-bottom: 6px;
}
调查研究表明：1、人们担忧的事情40%从未发生过；2、30%的忧虑是过去发生过的事情，是无法改变的；3、12%的忧虑集中于别人出于自卑感而作出的批评，这些忧虑是多余的；4、10%的忧虑是那些琐碎的事情；5、只有8%的忧虑可以列入“合理”的范围，而8%当中有4%的事情是完全不能控制的。

85%的快乐由人际关系决定，仅15%的快乐来自于个人成就。人95%的时间是无聊、苦闷、孤独、落寞、烦闷、平淡的，只有5%的时间是风光的。所以，我们要学会处理好人际关系，学会忍受平淡无奇的生活。