真的找不出原因了，大家帮帮忙。谢谢。为什么鼠标移到了LI上那个悬浮层没显示出来呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{margin: 0;
padding: 0}
.top{height: 40px;
line-height: 40px;
font-size: 11pt;
color:white;
padding-left: 20px;
text-align: left;
font-weight: bold;
background: #e4393c;}
.iul{border: 2px solid #e4393c;
width: 220px;
margin-left:30px;
margin-top: 20px }
.iul li{list-style-type: none;
padding-left:8px;
height: 30px;
line-height: 30px;
text-align: left;
z-index: 3;
/* background-image:url(1.png); */
background-image:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg);
background-repeat: no-repeat;
background-position:right; }
.iul li a{text-decoration: none;
font-size: 11pt;
color:gray;}
.iul li a:hover{color:#e4393c;
text-decoration:underline;
font-weight:bold;}
.iul li:hover{background-image: none;
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;}
.okc{display:none;
z-index: 4;
width: 715px;
left: 240px;
position:absolute;
top:60px;
border:1px solid #DDD;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow:0 0 8px #DDD;
-webkit-box-shadow:0 0 8px #DDD;}
.leftdiv{background: gray;
width: 490px;
float: left;
margin: 5px;}
.rightdiv{background: blue;
width: 200px;
float: left;
margin: 5px;}
.iul li:hover .okc{display:block;}
</style>
<body>
<ul class='iul'>
<div class='top'>全部商品分类</div>
<li><a href='#'>图书、音像、数字产品</a></li>
<div class='okc'>
<div class='leftdiv'>手机<br>电脑<br>通讯<br>笔记本</div>
<div class='rightdiv'>右侧推荐品牌<br>右侧推荐品牌<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>
