                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /商城分類導航效果

求大神指導，怎么實現(xiàn)一級菜單與二級菜單的分割效果？

一級導航和二級導航留空的效果，加個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="#">聯(lián)系</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="#">行業(yè)資訊</a></li>
??????? </ul>
??? </li>
??? <li class="cp"><a href="#">產(chǎn)品</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>