/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu *{margin: 0;padding: 0;list-style: none;}
.sf-menu ul{position: absolute;top: -999em;width: 114px; /* left offset of submenus need to match (see below) */}
.sf-menu ul li{width: 100%;}
.sf-menu li:hover{visibility: inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li{float: left;position: relative;}
.sf-menu a{display: block;position: relative;color:#FFF;}
.sf-menu li:hover ul, .sf-menu li.sfHover ul{padding-left:0px;top: 30px; /* match top ul list item height */z-index: 99;}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul{top: -999em;padding-left:0px; font-size:14px;}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul{left: 114px; /* match ul width */top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul{top: -999em;}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul{left: 114px; /* match ul width */top: 0;}
/*** DEMO SKIN ***/
.sf-menu{float: left;}
.sf-menu a{text-align:center;text-decoration: none;}
.sf-menu a, .sf-menu a:visited{ /* visited pseudo selector so IE6 applies text colour*/color:#fff;font-size:12px;}
.sf-menu li{width:116px;}
/**二级栏目**/
.sf-menu li li{width:114px;border:1x solid red;}
.sf-menu ul.u2{border:1x solid red;border-top:0;width:114px;}
.sf-menu li li.l2,.sf-menu li li li.l3{background: #666;color:#fff;/**二级栏目背景**/ border-left:0px solid #ccc;border-right:0px solid #ccc;border-bottom:0px solid #ccc;}

.sf-menu li li li.l3{white-space:nowrap;/*设置不折行*/text-overflow:ellipsis;/*这就是省略号喽*/-o-text-overflow:ellipsis;/*兼容opera*/overflow: hidden;}

.sf-menu li.l2 a,.sf-menu li.l3 a{ color:#FFF;height:30px;}

.sf-menu li li li.l3{background: #666;/**三级栏目背景**/border-bottom:0px solid #CCC;}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{background: url(../images/line1.gif);}/**设置当前焦点** top:0;*/
.sf-menu ul.u3{border:0px solid #0879c2;left:10px;}
.sf-menu li.l2 a:hover,.sf-menu li.l3 a:hover{background: url(../images/line1.gif);}

/*** arrows **/
.sf-menu a.sf-with-ul{padding-right: 0px;min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */}
.sf-sub-indicator{position: absolute;display: block;right: .75em;top: 1.05em; /* IE6 only */width: 10px;height: 10px;text-indent: -999em;overflow: hidden; /* 8-bit indexed alpha png. IE6 gets solid image only */}
a > .sf-sub-indicator{ /* give all except IE6 the correct values */top: .8em;background-position: 0 -100px; /* use translucent arrow for modern browsers*/}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator{background-position: -10px -100px; /* arrow hovers for modern browsers*/}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator{ background-position: -10px 0;}
.sf-menu ul a > .sf-sub-indicator{background-position: 0 0;}
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator{background-position: -10px 0; /* arrow hovers for modern browsers*/}

/*** shadows for all but IE6 ***/
.sf-shadow ul{padding-left:0px;}
.sf-shadow ul.sf-shadow-off{padding-left:30px;}
.sf-menu .ff a, .sf-menu .ff a:visited{/* visited pseudo selector so IE6 applies text colour*/   color:#fff;font-size:12px;}