Wie entferne ich den Raum zwischen Unterkategorie und Kategorie?

Question

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

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

<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>

Die beiden subcat Division und Kategorie Divison sind zwischen ein wenig Platz bekommen, aber ich möchte, dass sie auch an, wenn es für reaktions ness aktiviert ist, wenn ich entsprechende linke Index von Hit und Versuch, der Raum wird entfernt, aber es kommt wieder, wenn ich auf Reaktionsfähigkeit überprüfe. was kann ich anstelle der festen Position verwenden, um sie beide befestigt zu halten! Vielen Dank im Voraus

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>