<!DOCTYPE html PUBLIC "-//W3C//DTD...-慕课网

                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /商城分类导航效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>京东导航制作练习</title>
   <style type="text/css"> /* 样式表*/
    body /*(全局的body的定义-通用字体大小)*/

   {

       padding:0; /*填充为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-family:"微软雅黑";
       font-size:11pt;字号
       font-weight:bold;/*字体加粗*/
       color:white;/*颜色*/
       background:#e4393c;
       padding-left:25px;/*填充*/
   }
   .topmenu li /*针对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(images/1.png);/*定义背景图片*/
       background-repeat:no-repeat;/*背景不重复*/
       background-position:right;/*默认是在左边，设置背景在右边*/
   }
   .topmenu li a /*去掉a标签下的下划线及颜色*/
   {
         text-decoration:none;
       color:#313131;
   }
   .topmenu li a:hover   /*li下面的a标签所有的超级链接在鼠标移动下的状态 hover被大部分标签支持*/
   {
       text-decoration:underline;/*鼠标经过产生下划线*/
       font-weight:bold;/*字体加粗*/
       color:#e4393c;
   }
   .topmenu li:hover /*给每个li标签修改样式*/
   {
         border:1px solid #DDD; /*边框线为1px,实线颜色为灰色*/
       border-right:0px;/*右边无边框*/
       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:none;/*block为显示，none为隐藏*/
       width:715px;
       left:220px;
       position:absolute;
       top:40x;
       border:1px solid #DDD;
       z-index:4;
       background-color:white;
       box-shadow:0 0 8px #DDD; /*边框背景阴影，外发光效果*/
       -moz-box-shadow:0 0 8px #DDD; /*兼容火狐浏览器 -边框背景阴影，外发光效果*/
       -webkit-box-shadow:0 0 8px #DDD; /*兼容谷歌浏览器 -边框背景阴影，外发光效果*/
   }
   .leftdiv
   {
         background:pink;
       float:left;
       width:400px;
       margin:5px;
   }
   .rightdiv
   {
         background:green;
       float:left;
       width:200px;
       margin:5px;
   }
    .topmenu li:hover .submenu /*问题在这里：这里定义样式后，鼠标经过不显示，是什么原因？求解，谢谢*/
   {
         display:block;

   }
   </style>
</head>

<body>
    <ul class="topmenu">
       <div class="toptitle">
        全部商品分类
       </div>
        <li><a href="#">图书、音像、数字商品</a></li>
            <div class="submenu">
               <div class="leftdiv">
                     左侧二级分类<br/>
                   左侧二级分类<br/>
                   左侧二级分类<br/>
                   左侧二级分类<br/>
                   左侧二级分类<br/>
                   左侧二级分类<br/>
               </div>
               <div class="rightdiv">
                     右侧推荐内容<br/>
               </div>
            </div>
       <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>