编程练习，商城分类导航效果教程-慕课网

index.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
       body
        {
            padding: 0;
            font-size: 10pt;
            behavior:url(css/csshover.htc);
        }
        .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://img1.sycdn.imooc.com//5411027300014f0200220030.jpg);
            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
        {
           /* 任务编写代码处 */
        }
 
        .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;
        }
 
 
    </style>
</head>
<body>
 
    <ul class="topmenu">
        <div class="toptitle">
            全部商品分类
        </div>
        <li><a href="#">图书、音像、数字商品</a><span></span>  </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>
        <li><a href="#">营养保健</a></li>
    </ul>
</body>
</html>