商城导航菜单(CSS)---详细

zongran老师讲的CSS实现商城菜单,课程中还有js特效与代码优化
建议看看老师的写的源代码

导航分类样式

    门户网站如新浪等:  导航在上方平铺展示

    商城网站如天猫·京东:导航在页面一侧以一级菜单+悬浮窗的形式展示

代码是京东商城一级菜单的为例,CSS共有三部分本别是一级菜单制作,
鼠标浮动以及悬浮层制作。一些想法都以注释的形式在每行的代码上方。

html结构

最终效果图

一级菜单制作

.topmenu
{
    display: block;
    width: 220px;
    //为整体的一级菜单添加外边框
    border: 2px solid #e4393c;
    margin: 0;
    padding: 0;
}
//toptitle即红色区域
.toptitle  
{
    //保持文字的垂直居中
    height: 40px;
    line-height: 40px;
    //文字向左对齐
    text-align: left;
    font-size: 11pt;
    font-weight: bold;
    color: White;
    background: #e4393c;
    //文字与左边框有20px的距离
    padding-left: 20px;
}

//为每个一级菜菜单设置样式
.topmenu li
{
    height: 30px;
    line-height: 30px;
    font-size: 11pt;
    //去除li标签的前面原点
    list-style-type: none;
    text-align: left;
    padding-left: 8px;
    //为后面的悬浮层在其上方显示做铺垫值,
    //值越小该层次越容易被覆盖
    z-index: 3;
    //设置一级菜单内的右侧箭头(该网页无法显示)
    background-image: url(1.png);
    //当图片小于父容器是也不在其父容器内部平铺
    background-repeat: no-repeat;
    //在父容器的内部右侧贴边显示
    background-position: right;
}
.topmenu li a
{
    text-decoration: none;
    color: #313131;
}

鼠标浮动效果

.topmenu li a:hover
{
    text-decoration: underline;
    //设置字体为粗体
    font-weight: bold;
    color: #e4393c;
}
.topmenu li:hover
{
    border: 1px solid #DDD;
    //去除该li的右border
    border-right: 0;
    //为当鼠标划过时的li的外部阴影效果
    box-shadow: 0 0 8px #DDD;
    -moz-box-shadow: 0 0 8px #DDD;
    -webkit-box-shadow: 0 0 8px #DDD;
    //取消设置的图片
    background-image: none;
}

//span标签是为了消除悬浮框的外边框对一级菜单的影响,
//用自身来覆盖边框达到隐藏
.topmenu li:hover span
{
    //与li的背景颜色一致
    background: white;
    display: inline-block;
    //显示在Z轴的最前方
    z-index: 20;
    width: 20px;
    height: 30px;
    float: right;
    position: relative;
}

悬浮层制作

.topmenu li:hover .submenu
{
    //当鼠划过li时使其显示
    display: block;
}

.submenu
{
    //在一级标签的li内部隐藏
    display: none;
    width: 715px;
    left: 220px;
    position: absolute;
    top: 40px;
    border: 1px solid #DDD;
    z-index: 4;
    background: white;
    box-shadow: 0 0 8px #DDD;
    -moz-box-shadow: 0 0 8px #DDD;
    -webkit-box-shadow: 0 0 8px #DDD;
}

.leftdiv
{
    float: left;
    width: 490px;
    margin: 5px;
}
.rightdiv
{
    float: left;
    width: 200px;
    margin: 5px;
}

.leftdiv dl
{
    display: block;
    border-bottom: 1px solid #EEE;
    padding-bottom: 6px;
    //当该部分内部文字过多时,隐藏而不是扩充容器
    overflow: hidden;
}
.leftdiv dl dt
{
    display: block;
    float: left;
    width: 60px;
    text-align: right;
    height: 22px;
    line-height: 22px;
    padding-right: 6px;
}

.leftdiv dl dt a
{
    color: #e4393c;
    font-weight: bold;
    text-decoration: underline;
    font-size: 10pt;
}
.leftdiv dl dd
{
    display: block;
    overflow: hidden;
}

.leftdiv dl dd a
{
    //通过改变a标签的形式,可以自定义其高度和宽度
    display: block;
    float: left;
    //标签内部的左侧竖线
    border-left: 1px solid #CCC;
    color: #737373;
    font-size: 9pt;
    padding: 0 8px;
    height: 14px;
    line-height: 14px;
    //因dt标签的高度为22px,而dd的行高只有14px,尚未对齐
    //故增加margin来提高整体的高度,若只是修改dt标签的高度为14px
    //则会使dd没有行间距，不美观
    margin: 4px 0;
}

.rightdiv dl dd
{
    margin: 3px 0;
}

.rightdiv dl dt
{
    color: #e4393c;
    font-weight: bold;
    font-size: 10pt;
}

.rightdiv dl dd a
{
    font-size: 9pt;
    color: #737373;
    line-height: 22px;
}
.rightdiv dl dd a:hover
{
    color: #737373;
    //取消字体加粗
    font-weight: normal;
}

1.取消li的前方原点
    list-style-type: none;
2.自定义Z轴方向重叠时的位置(3D模型)
    z-index: 3;
3.添加边框外部的阴影
    box-shadow: 0 0 8px #DDD;
    -moz-box-shadow: 0 0 8px #DDD;
    -webkit-box-shadow: 0 0 8px #DDD;
4.取消背景的图片
    background-image: none;