商城分类导航效果左侧二级分类和右侧推荐品牌为什么不是左右的？

<!DOCTYPE html>
<html>
<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-color: #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(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;
            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;
        }
        .submenu{
            display: block;
            width: 715px;
            left:220px;
            position: absolute;
            top: 40px;
            border: 1px solid #DDD;
            z-index: 4;
            background:white;
            -moz-box-shadow: 0 0 8px #DDD;
            -webkit-box-shadow: 0 0 8px #DDD;
        }
        .leftdiv{
            background: gray;
            float：left;
            width: 490px;
            margin: 5px;
        } 
        .rightdiv{
            background: lightblue;
            float: left;
            height:200px;
            width: 200px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <ul class = "topmenu">
        <div class = "toptitle">全部商品分类</div>
        <li><a href = "#">图书，音像，数字商品</a>
            <div class = 'submenu'>
                <div class = "leftdiv"> 
                    左侧二级分类<br/>
                    左侧二级分类<br/>
                    左侧二级分类<br/>
                    左侧二级分类<br/>
                    左侧二级分类<br/>
                    左侧二级分类<br/>
                    左侧二级分类<br/>
                </div>
                <div class = "rightdiv">
                    右侧推荐品牌
                </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>
        <li><a href = "#">医药保健</a></li>
        <li><a href = "#">图书，音像，电子书</a></li>
        <li><a href = "#">彩票，旅行，充值，票务</a></li>
        <li><a href = "#">理财，众筹，白条，保险</a></li>
    </ul>
</body>
</html>
皓韵儿
浏览 1550回答 1
1回答

Menoen
左侧二级分类也要浮动
0 0
随时随地看视频慕课网APP
商城分类导航效果 左侧二级分类 和 右侧推荐品牌为什么不是左右的？

1回答

商城分类导航效果左侧二级分类和右侧推荐品牌为什么不是左右的？
