你的位置:首页 > 网页设计

[网页设计]商城分类导航


  一个css写的商城导航效果 

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>商城分类导航</title>  <style type="text/css">    body    {      padding: 0;      font-size: 10pt;    }    .topmenu    {      display: block;      width: 220px;      border: 2px solid #e4393c;      margin: 0;      padding: 0;    }    .toptitle    {      height: 40px;      line-height: 40px;      text-align: left;      font-size: 11pt;      font-weight: bold;      color: White;      background: #e4393c;      padding-left: 20px;    }    .topmenu li    {      height: 30px;      line-height: 30px;      font-size: 11pt;      list-style-type: none;      text-align: left;      padding-left: 8px;      z-index: 3;      background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg);      background-repeat:no-repeat;      background-position:right;    }    .topmenu li:hover      {      border:1px solid #DDD;      border-right:0;      box-shadow: 0 0 8px #DDD;      -moz-box-shadow:0 0 8px #DDD;      -webkit-box-shadow:0 0 8px #DDD;      background-image:none;      }    .topmenu li a    {      text-decoration: none;      color: #313131;    }    .topmenu li a:hover    {      text-decoration: underline;      font-weight: bold;      color: #e4393c;    }    .submenu    {      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;    }    .topmenu li:hover .submenu    {      display: block;    }    .topmenu li:hover span    {      background: white;      display: inline-block;      z-index: 20;      width: 20px;      height: 30px;      float: right;      position: relative;    }    .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: blod;      text-decoration: underline;      font-size:10pt;    }    .leftdiv dl dd    {      display: block;      overflow: hidden;    }    .leftdiv dl dd a    {      display: block;      float:left;      border-left:1px solid #DDD;      color:#737373;      font-size: 9px;      padding:0 8px;      height:14px;      line-height: 14px;      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;    }  </style></head><body>  <ul class="topmenu">    <div class="toptitle">      全部商品分类    </div>    <li>      <a href="#">图书、音像、数字商品</a><span></span>      <div class="submenu">        <div class="leftdiv">        <dl>          <dt><a href="">电子书</a></dt>          <dd>            <a href="">免费</a><a href="">小说</a><a href="">励志与成功</a>            <a href="">婚恋/两性</a><a href="#">文学</a><a href="#">经管</a> <a href="#">畅读VIP</a>          </dd>        <dl >          <dt><a href="#">生活</a></dt>          <dd>            <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>            <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>            <a href="#">动漫/幽默</a> <a href="#">体育/运动</a>          </dd>        </dl>        </div>      <div class="rightdiv">          <dl>            <dd>              <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">                <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"                  width="194" height="70" title="\家电">              </a>            </dd>          </dl>          <dl>            <dt>推荐品牌</dt>            <dd>              <a href="#">美的官方旗舰店</a>            </dd>            <dd>              <a href="#">苏泊尔旗舰店</a>            </dd>           </dl>        </div>      </div>    </li>    <li>      <a href="#">家用电器</a>      <div class="submenu">        <div class="leftdiv">        <dl>          <dt><a href="">大家电</a></dt>          <dd>            <a href="">平板电视</a>            <a href="">空调</a>            <a href="">冰箱</a>            <a href="">洗衣机</a>             <a href="#">扫地机器人</a>             <a href="#">吸尘器</a>             <a href="#">电话机</a>             <a href="">家电配件</a>             <a href="">家庭影院</a>             <a href="">冷柜/冰吧</a>             <a href="">洗衣机</a>          </dd>        </dl>      </div>      </div>    </li>    <li><a href="#">手机、数码</a></li>    <li><a href="#">电脑、办公</a></li>    <li><a href="#">家居、家具、家装、厨具</a></li>    <li><a href="#">服饰内衣、珠宝首饰</a></li>    <li><a href="#">个护化妆</a></li>    <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>    <li><a href="#">运动户外</a></li>    <li><a href="#">汽车用品</a></li>    <li><a href="#">母婴、玩具乐器</a></li>    <li><a href="#">食品饮料、酒类、生鲜</a></li>    <li><a href="#">营养保健</a></li>  </ul></body></html>