商场分类导航效果

门户类网站特点：导航在上方平铺展示。（一级菜单，一般无二级菜单）
商城类网站特点：纵向列表横向伸缩展示（一级纵向菜单列表，动态展示层展示二级横向菜单列表)

商城分类导航实现（CSS版）

1.文字跟左边的距离用padding可能会影响父元素的宽度，如果用text—indent：**px；就不会有什么隐患；
2.背景色和背景图片及图片位置设定可以一句话搞定;  background: #**** (这里是背景色) 空格 url（图片路径）空格 no-repeat || repeat-x ||repeat-y (分别是不重复|| x轴方向平铺||y轴方向平铺) 空格 图片水平距离 空格 图片垂直距离

测量边框大小、颜色等可以使用QQ截图；
使用计算机的程序员模式进行进制的转换；
设置元素的长、宽大小与父元素的长宽大小相等，使元素处于长或宽居中，
例：height，line-height(同一个元素设置，使内容垂直居中）；
z-index: 3;//设置元素的堆叠顺序
设置一级菜单（li标签）右边的箭头：
background-image:url(1.jpg);//设置图片
background-repeat:no-repeat;//设置不重复
background-position:right;//设置位于右边
鼠标悬浮效果
1.QQ取色:qq截图时按着ctrl就可以得到16进制颜色值
2.兼容性问题：
 Firefox: -moz-
Chrome、Safari: -webkit-
Opera: -o-
IE: -ms-
3.box-shadow: h-shadow(水平阴影的位置,必需) v-shadow(垂直阴影的位置,必需) blur(模糊距离,可选) spread(阴影的尺寸,可选) color(阴影的颜色,可选) inset(将外部阴影 (outset) 改为内部阴影,可选);
悬浮层制作
1、给二级a标签，添加Border-right;
2、元素间用margin撑开；
3、右边的submenu加position:absolute;
4、dl加display:block;
商城分类导航实现（JS版）
当给li元素加上lihover类之后，submenu和span作为li的子元素也会套用对应的样式，因此只需要给对应的一级菜单绑定lihover类，即可完成悬浮二级菜单的效果
用js给所有的li加mouseover和mouseout时间。
window.οnlοad=function(){
var lis=document.getElementsbyTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].οnmοuseοver=function(){
this.className="lihover";
}
lis[i].οnmοuseοut=function(){
this.className="";
}
}
优化“导航”代码

1、当悬浮层div的高度过小（div.bottom<li.top）时，将div向下挪：
    divBottom = div.top + div.offsetHeight;
    if(divBottom < liTop) div.top = liTop;

2、当div高度过大（div.height>window.height）时，将div向上挪：
    winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    if(winHeight < div.offsetHeight) div.top = 0;

3、添加div中的图片溢出效果（给div中的img标签设置样式）：
    position:relative;
    bottom: -30px;
    right: -30px;

4、给li下添加“推荐导航项”：
    给li中再加一个隐藏的div存放“推荐项”，在li:hover的时候显示，同时增加li的高度。

5、鼠标移入时应使用mouseenter事件，以防鼠标在li上移动时重复触发mouseover事件。
    该案例应使用mouseover+mouseout或mouseenter+mouseleave，以防鼠标移动时二级菜单消失。