下面的第三行为什么会跟第二行的重合

.fenlei_ul{

height:464px;
width:210px;
list-style:none;
background:rgb(200,22,35);}    

.fenlei_ul li{

height:31px;
color:#FFF;
font-size:14px;
font-weight:600;
line-height:31px;
margin-left:10px;}    

.xfl{

height:31px;
line-height:31px;
color:rgb(182,29,29);
background:#FFF;
width:200px;
margin-left:1px;
padding-left:9px;
display:none;
position:relative;
font-size:14px;}

.jdc{

width:999px;
height:521px;
border:1px solid rgb(182,29,29);
position:absolute;
left:210px;
z-index:1;
top:-1px;
display:none;}    

<ul class="fenlei_ul f1">

    <li id="a1" onmousemove="jdc('1')">
        家用电器<span style="float:right;margin-right:5px;">></span>
    </li>
    <div style="position:relative;">
        <div class="xfl f1" id="b1" onmousemove="jdc('1')" onmouseout="jdc1('1')">
            <a href="" target="_blank">家用电器</a>
        </div>
        <div class="jdc f1" id="c1" onmousemove="jdc('1')" onmouseout="jdc1('1')">
            <div style="width:1px;height:31px;background:#FFF;left:-1px;position:absolute;"></div>
        </div>
    </div>
     <li>手机、数码、京东通信<span style="float:right;margin-right:5px;">></span></li>
    
    <li>电脑、办公<span style="float:right;margin-right:5px;">></span></li>
    
    <li >家居、家具、家装、厨具<span style="float:right;margin-right:5px;">></span></li>

</ul>