求大神指导，怎么实现一级菜单与二级菜单的分割效果？-慕课网

求大神指导，怎么实现一级菜单与二级菜单的分割效果？

来源：3-1 JS实现特效

qq_xsg

2017-04-22 14:48

一级导航和二级导航留空的效果，加个margin后移到一级菜单是弹出来二级菜单了，可是却移不到二级菜单，一下移到空白哪里二级菜单就隐藏了

<!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=utf-8" />
<title>无标题文档</title>
<style>
.head{ height:60px;}
.headd li{
            height: 60px;
           width:90px;
           display:block;
           float:right;
            line-height: 60px;
            font-size: 11pt;
            list-style-type: none;
            text-align:center;

        }
.lia{
   height: 30px;
   width:90px;
   display:block;
   float:left;
   padding-top:15px;
   padding-left:15px
   }

.headd li a{
            text-decoration: none;
            color:#999;
           font-size:15px;
           font-family:"Microsoft YaHei";
        }
.caidan li:hover{
   border-bottom:1px solid #999;
   }

.headd a:hover{color:#666}
.cpflei{
   width:90px;
   height:120px;
   position:absolute;
   z-index:20;
   }
.cpflei li{
   width:180px;
   height:55px;
   display:block;
   text-align:center;
   list-style-type:none;
   border-bottom:1px solid #F8F7F5;
   border-left:1px solid #F8F7F5;
   border-right:1px solid #F8F7F5;
   box-shadow:0 0 1px #F8F7F5;
   -moz-box-shadow:0 0 1px #F8F7F5;
   -webkit-box-shadow:0 0 1px #F8F7F5;
   z-index:4;}
.cpflei li a{
            text-decoration: none;
           line-height:55px;
            color:#999;
           font-size:15px;
           font-family:"Microsoft YaHei";
           text-align:center;
        }
.zxflei{
   width:90px;
   height:120px;

   }
.zxflei li{
   width:180px;
   height:55px;
   display:block;
   text-align:center;
   list-style-type:none;
   border-bottom:1px solid #F8F7F5;
   border-left:1px solid #F8F7F5;
   border-right:1px solid #F8F7F5;
   box-shadow:0 0 1px #F8F7F5;
   -moz-box-shadow:0 0 1px #F8F7F5;
   -webkit-box-shadow:0 0 1px #F8F7F5;
   z-index:4;}
.zxflei li a{
            text-decoration: none;
           line-height:55px;
            color:#999;
           font-size:15px;
           font-family:"Microsoft YaHei";
           text-align:center;
        }
.hx{
   border-top:1px solid #999}
.cpflei{
   display:none}
.caidan li:hover .cpflei{
   display:block}

.zxflei{
   display:none;
   position:absolute;
   z-index:20;}
.caidan li:hover .zxflei{
   display:block}
.caidan{
   position:relative;}

</style>

</head>

<body>

<div class="headd">
   <ul class="caidan">
    <li><a href="#">联系</a></li>
    <li><a href="#">案例</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">资讯</a>
     <ul class="zxflei">
          <li class="hx"><a href="#">公司新闻</a></li>
          <li><a href="#">行业资讯</a></li>
        </ul>
    </li>
    <li class="cp"><a href="#">产品</a>
        <ul class="cpflei">
          <li class="hx"><a href="#">零食电心</a></li>
          <li><a href="#">乳制品</a></li>
          <li><a href="#">汤羹</a></li>
          <li><a href="#">肉蛋类</a></li>
        </ul>
    </li>
    <li><a href="#">首页</a></li>
    </ul>
</div>

</body>
</html>