商城分类导航纯Css与Js版的简单Demo

商城分类导航纯Css与Js版的简单Demo_第1张图片
一、Html布局

二、Css样式
  • 纯css版


  • Js版的css样式(简单的将 li:hover 改成一个类名 .lihover)
.topmenu .lihover{/*鼠标移动到上面时应用的样式*/
        background-image:none;
        /*去掉箭头图片*/
        border:1px solid #DDD;
        border-right: 0;
        box-shadow:0 0 8px #DDD;
        /*向框添加一个或多个阴影*/
        -moz-box-shadow: 0 0 8px #DDD;
        /* 老的 Firefox */
        -webkit-box-shadow: 0 0 8px #DDD;
        /*兼容谷歌*/
        border-left: 4px solid #e4393c;
    }
    .topmenu .lihover .submenu{/*悬浮层*/
      display: block;
    }
    .topmenu .lihover span{/*白色小方框*/
      background: white;
      display: inline-block;
      z-index: 20;
      width: 20px;
      height: 30px;
      float: right;
      position: relative;
    }
三、Js部分

你可能感兴趣的:(商城分类导航纯Css与Js版的简单Demo)