如何删除子类别和类别划分之间的空间？

Question

＆＃13;

＆＃13;

.category-list {
  width: 20%;
  margin-left: 50px;
  position: fixed;
  top: 50px;
}

#subcat1 {
  width: 50%;
  position: fixed;
  top: 50px;
  left: 350px;
}

＆＃13;

<div class="category-list" id="list-category">
  <div class="list-group">
    <a href="#" class="list-group-item" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';">First item</a>
    <div class="subcat" id="subcat1" style="display:none;" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';">
      <div class="list-group">
        <a href="#" class="list-group-item">Second item</a>
        <a href="#" class="list-group-item">Third item</a>
        <a href="#" class="list-group-item">First item</a>
        <a href="#" class="list-group-item">Second item</a>
        <a href="#" class="list-group-item">Third item</a>
        <a href="#" class="list-group-item">First item</a>
        <a href="#" class="list-group-item">Second item</a>
        <a href="#" class="list-group-item">Third item</a>
        <a href="#" class="list-group-item">First item</a>
        <a href="#" class="list-group-item">Second item</a>
        <a href="#" class="list-group-item">Third item</a>
      </div>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

两个subcat分区和类别divison之间有一点空间但是我想让它们连接，即使在检查响应性时，如果我通过命中和试验制作适当的左索引，空间被移除但是它再次当我检查响应性时。 我可以使用什么而不是固定位置来保持它们的连接！ 提前致谢

Answer 1

.category-list{
    width:20%;
    margin-left:50px;
    position: relative;
    top:50px;
    
   
}
#subcat1{
    width:50%;
    position:absolute;
    top:0px;
    right:0
}

  <div class="category-list" id="list-category">
                <div class="list-group">
                <a href="#" class="list-group-item" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';" >First item</a>
                <div class="subcat" id="subcat1" style="display:none;" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';">
                       <div class="list-group">
                            <a href="#" class="list-group-item">Second item</a>
                            <a href="#" class="list-group-item">Third item</a>
                            <a href="#" class="list-group-item">First item</a>
                            <a href="#" class="list-group-item">Second item</a>
                            <a href="#" class="list-group-item">Third item</a>
                            <a href="#" class="list-group-item">First item</a>
                            <a href="#" class="list-group-item">Second item</a>
                            <a href="#" class="list-group-item">Third item</a>
                            <a href="#" class="list-group-item">First item</a>
                            <a href="#" class="list-group-item">Second item</a>
                            <a href="#" class="list-group-item">Third item</a>
                        </div>

                </div>
 </div>
</div>