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

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

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

先看一下效果图
产品端点效应：两个端点的产品更容易快速形成品牌及规模效益：一是高端产品，锁定奢侈消费，高投稿高价值高回报。二是简易产品，不追求附加值，仅满足客户基本需求，如快捷酒店只提睡眠%2B洗澡%2B上网%2B早餐。很简单，但却占领了庞大市场份额，低投入低价值低回报，但可以快速复

View Code

页面
 1  < div  class ='allsort' >
 2                      < div  class ='mt' >
 3                          < strong > 导航菜单 </ strong >
 4                      </ div >
 5                      < div  class ='mc' >
 6                          < asp:Repeater  ID ="BigMenu"  runat ="server"  OnItemDataBound ="BigMenu_ItemDataBound"
 7                             EnableViewState ="false" >
 8                              < ItemTemplate >
 9                                  < div  class ='item  ' >
10                                      < span >   < h3 >    < a  href ="#" >   <% # Eval ( " menu_name " )  %> </ a ></ h3 >    </ span > //第一级
11                                      < div  class ='i-mc' >
12                                          < div  class ='subitem' >
13                                              < asp:Repeater  ID ="MinMenu"  runat ="server"  OnItemDataBound ="MinMenu_ItemDataBound"   EnableViewState ="false" >
14                                                  < ItemTemplate >
15                                                      < dl  class ="fore" >   < dt  >< a  href ="#" >     <% # Eval ( " sub_name " ) %> </ a ></ dt >
16                                                      < dd >< em >< a  href ="#" >
17                                                                  < asp:Repeater  ID ="MinMenu2"  runat ="server"  EnableViewState ="false" > //第二级
18                                                                      < ItemTemplate >
19                                                                        < a  href ="#"  onclick ="fn_getmenu1('<%#Eval(" menu_name")% > ',' <% # Eval ( " menu_code " ) + " ?menuId= " + Eval ( " menu_id " ) + ( Eval ( " open_parameter " )! = ""  ?  " & " + Eval ( " open_parameter " ) :  "" ) %> ',' <% # Eval ( " menu_id " ) %> ',' <% # Eval ( " open_type " ) %> ')">// 第三级
20                                                                              <% # Eval ( " menu_name " ) %>
21                                                                          </ a >
22                                                                   <% #((Container.ItemIndex  +   1 ) %  4 )  ==   0  ?  " <br/> "  :  ""   %>  // 控制每行显示多少个
23                                                                      </ ItemTemplate >
24                                                                  </ asp:Repeater >
25                                                              </ a ></ em >
26                                                          </ dd >
27                                                      </ dl >
28                                                  </ ItemTemplate >
29                                              </ asp:Repeater >
30                                          </ div >
31                                      </ div >
32                                  </ div >
33                              </ ItemTemplate >
34                          </ asp:Repeater >
35 
36                          < script  type ="text/javascript" >
37                              $( " .allsort " ).hoverForIE6({ current:  " allsorthover " , delay:  150  });
38                              $( " .allsort .item " ).hoverForIE6({ delay:  150  });
39      

经验是创新的天敌，往往因有经验而散漫傲物，就因为这经验，而令其思维陷入固定的模式中无法突破，经验这东西成事不足，败事有余，经验只能作为进入某个领域的基础，而不能作为权衡人才的标准。根据左右机构观察，70%的创新来自于无经验人士，有经验只能做纵深研究，无法横向贯通。

做营销只需要做好两件事：研究客户和研究对手。研究客户，知道客户想要什么，不喜欢什么，从而开发出适销对路的产品；研究

View Code

js脚本：
( function ($) { $.extend($.browser, { client:  function () {  return  { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, bodyWidth: document.body.clientWidth, bodyHeight: document.body.clientHeight }; }, scroll:  function () {  return  { width: document.documentElement.scrollWidth, height: document.documentElement.scrollHeight, bodyWidth: document.body.scrollWidth, bodyHeight: document.body.scrollHeight, left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop  +  document.body.scrollTop }; }, screen:  function () {  return  { width: window.screen.width, height: window.screen.height }; }, isIE6: $.browser.msie  &&  $.browser.version  ==   6 , isMinW:  function (val) {  return  Math.min($.browser.client().bodyWidth, $.browser.client().width)  <=  val; }, isMinH:  function (val) {  return  $.browser.client().height  <=  val; } }) })(jQuery); ( function ($) { $.widthForIE6  =   function (option) {  var  s  =  $.extend({ max:  null , min:  null , padding:  0  }, option  ||  {});  var  init  =   function () {  var  w  =  $(document.body);  if  ($.browser.client().width  >=  s.max  +  s.padding) { w.width(s.max  +   " px " ); }  else   if  ($.browser.client().width  <=  s.min  +  s.padding) { w.width(s.min  +   " px " ); }  else  { w.width( " auto " ); } }; init(); $(window).resize(init); } })(jQuery);
( function ($) { $.fn.hoverForIE6  =   function (option) {  var  s  =  $.extend({ current:  " hover " , delay:  1000  }, option  ||  {}); $.each( this ,  function () {  var  timer1  =   null , timer2  =   null , flag  =   false ; $( this ).bind( " mouseover " ,  function () {  if  (flag) { clearTimeout(timer2); }  else  {  var  _this  =  $( this ); timer1  =  setTimeout( function () { _this.addClass(s.current); flag  =   true ; }, s.delay); } }).bind( " mouseout " ,  function () {  if  (flag) {  var  _this  =  $( this ); timer2  =  setTimeout( function () { _this.removeClass(s.current); flag  =   false ; }, s.delay); }  else  { clearTimeout(timer1); } }) }) } })(jQuery);
( function ($) {
    $.extend({ _jsonp: { scripts: {}, counter:  1 , head: document.getElementsByTagName( " head " )[ 0 ], name:  function (callback) {
         var  name  =   ' _jsonp_ '   +  ( new  Date).getTime()  +   ' _ '   +   this .counter;  this .counter ++ ;
         var  cb  =   function (json) { eval( ' delete  '   +  name); callback(json); $._jsonp.head.removeChild($._jsonp.scripts[name]);  delete  $._jsonp.scripts[name]; }; eval(name  +   '  = cb ' );  return  name;
    }, load:  function (url, name) {  var  script  =  document.createElement( ' script ' ); script.type  =   ' text/javascript ' ; script.charset  =   this .charset; script.src  =  url;  this .head.appendChild(script);  this .scripts[name]  =  script; } 
}, getJSONP:  function (url, callback) {
     var  name  =  $._jsonp.name(callback); 
var  url  =  url.replace( / {callback}; / , name); $._jsonp.load(url, name);  return   this ; } }); })(jQuery);
( function ($) {
    $.fn.jdTab  =   function (option, callback) {
         if  ( typeof  option  ==   " function " ) { callback  =  option; option  =  {}; };
         var  s  =  $.extend({ type:  " static " , auto:  false , source:  " data " , event:  " mouseover " , currClass:  " curr " , tab:  " .tab " , content:  " .tabcon " , itemTag:  " li " , stay:  5000 , delay:  100 , mainTimer:  null , subTimer:  null , index:  0  }, option  ||  {});
         var  tabItem  =  $( this ).find(s.tab).eq( 0 ).find(s.itemTag), contentItem  =  $( this ).find(s.content);  if  (tabItem.length  !=  contentItem.length)  return   false ;
         var  reg  =  s.source.toLowerCase().match( / http:\/\/|\d|\.aspx|\.ascx|\.asp|\.php|\.html\.htm|.shtml|.js|\W / g);
         var  init  =   function (n, tag) { s.subTimer  =  setTimeout( function () { hide();  if  (tag) { s.index ++ ;  if  (s.index  ==  tabItem.length) s.index  =   0 ; }  else  { s.index  =  n; }; s.type  =  (tabItem.eq(s.index).attr(s.source)  !=   null )  ?   " dynamic "  :  " static " ; show(); }, s.delay); };
         var  autoSwitch  =   function () { s.mainTimer  =  setInterval( function () { init(s.index,  true ); }, s.stay); };
         var  show  =   function () {
            tabItem.eq(s.index).addClass(s.currClass);  switch  (s.type) {
                 default :  case   " static " :
                     var  source  =   "" ;  break ;  case   " dynamic " :
                     var  source  =  (reg  ==   null )  ?  tabItem.eq(s.index).attr(s.source) : s.source; tabItem.eq(s.index).removeAttr(s.source);  break ;
            };  if  (callback) { callback(source, contentItem.eq(s.index), s.index); }; contentItem.eq(s.index).show();
        }; 
    var  hide  =   function () { tabItem.eq(s.index).removeClass(s.currClass); contentItem.eq(s.index).hide(); }; tabItem.each( function (n) { $( this ).bind(s.event,  function () { clearTimeout(s.subTimer); clearInterval(s.mainTimer); init(n,  false );  return   false ; }).bind( " mouseleave " ,  function () {  if  (s.auto) { autoSwitch(); }  else  {  return ; } }) });  if  (s.type  ==   " dynamic " ) { init(s.index,  false ); };  if  (s.auto) { autoSwitch(); } } })(jQuery);
( function ($) {
    $.fn.jdSlide  =   function (option) {
         var  settings  =  $.extend({ width:  null , height:  null , pics: [], index:  0 , type:  " num " , current:  " curr " , delay1:  200 , delay2:  8000  }, option  ||  {});  var  element  =   this ;  var  timer1, timer2, timer3, flag  =   true ;  var  total  =  settings.pics.length;  var  init  =   function () {  var  img  =   " <ul style='position:absolute;top:0;left:0;'><li><a href=' "   +  settings.pics[ 0 ].href  +   " ' target='_blank'><img src=' "   +  settings.pics[ 0 ].src  +   " ' width=' "   +  settings.width  +   " ' height=' "   +  settings.height  +   " ' /></a></li></ul> " ; element.css({  " position " :  " relative "  }).html(img); $( function () { delayLoad(); }) }; init();  var  initIndex  =   function () {  var  indexs  =   " <div> " ;  var  current;  var  x;  for  ( var  i  =   0 ; i  <  total; i ++ ) { current  =  (i  ==  settings.index)  ?  settings.current :  "" ;  switch  (settings.type) {  case   " num " : x  =  i  +   1 ;  break ;  case   " string " : x  =  settings.pics[i].alt;  break ;  case   " image " : x  =   " <img src=' "   +  settings.pics[i].breviary  +   " ' /> " ;  default :  break ; }; indexs  +=   " <span class=' "   +  current  +   " '><a href=' "   +  settings.pics[i].href  +   " ' target='_blank'> "   +  x  +   " </a></span> " ; }; indexs  +=   " </div> " ; element.append(indexs); element.find( " span " ).bind( " mouseover " ,  function (e) { clearInterval(timer1); clearInterval(timer3);  var  index  =  element.find( " span " ).index( this );  if  (index  ==  settings.index) {  return ; }  else  { timer3  =  setInterval( function () {  if  (flag) running(parseInt(index)); }, settings.delay1); } }).bind( " mouseleave " ,  function (e) { clearInterval(timer3); timer1  =  setInterval( function () { running(settings.index  +   1 ,  true ); }, settings.delay2); }) };  var  running  =   function (index, tag) {
             if  (index  ==  total) { index  =   0 ; }; element.find( " span " ).eq(settings.index).removeClass(settings.current); element.find( " span " ).eq(index).addClass(settings.current); timer2  =  setInterval( function () {
                 var  pos_y  =  parseInt(element.find( " ul " ).get( 0 ).style.top);
                 var  pos_a  =  Math.abs(pos_y  +  settings.index  *  settings.height);
                 var  pos_b  =  Math.abs(index  -  settings.index)  *  settings.height;
                 var  pos_c  =  Math.ceil((pos_b  -  pos_a)  /   4 );  if  (pos_a  ==  pos_b) { clearInterval(timer2);  if  (tag) { settings.index ++ ;  if  (settings.index  ==  total) { settings.index  =   0 ; } }  else  { settings.index  =  index; }; flag  =   true ; }  else  {  if  (settings.index  <  index) { element.find( " ul " ).css({ top: pos_y  -  pos_c  +   " px "  }); }  else  { element.find( " ul " ).css({ top: pos_y  +  pos_c  +   " px "  }); }; flag  =   false ; } 
            },  10 );
        }; 
  var  delayLoad  =   function () {  var  img  =   "" ;  for  ( var  i  =   1 ; i  <  total; i ++ ) { img  +=   " <li><a href=' "   +  settings.pics[i].href  +   " ' target='_blank'><img src=' "   +  settings.pics[i].src  +   " ' width=' "   +  settings.width  +   " ' height=' "   +  settings.height  +   " ' /></a></li> " ; }; element.find( " ul " ).append(img); timer1  =  setInterval( function () { running(settings.index  +   1 ,  true ); }, settings.delay2);  if  (settings.type) initIndex(); }; } })(jQuery);
  

对手，掌握敌我优劣势，知道何时应该围而不打，何时隔而不围，何时吃一个、挟一个、看一个，何时进攻、何时撤退转移，何时打局部战，何时打全歼战。

夏天总嫌床太小，而冬天却总感觉到床太大了，做营销就要认识到这种不同时段不同季节下的客户的不同需求，要认识到市场是随时在发生变化的，销售要因季节的变化而变化，所谓策略，是指某个阶段的谋划，而并非一策到底。

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%的时间是风光的。所以，我们要学会处理好人际关系，学会忍受平淡无奇的生活。