As hover <li> changing position going behind of previous <li>-CodePudding

am making horizontal top buttons with html, As I hover on li its next item change its position and comes just behind hovered item Please can anyone tell me solution so list don't change its position on hover and I don't want to use position fixed in code , Thank you in advance Link fiddle

//igone this line

CodePudding user response：

      .main-ul{
      display:flex;
      flex-direction:row;
      }
      
      .topflotLi {
       
        height: 224px;
        width: 50px;
        margin-top: -140px;
      }
            
      .topflotLi:hover {
        margin-top: -10px;
       
      }

      .topfloatdivMain {
        height: 170px;
        width: 74%;
        background-color: #00bcd4;
        margin-left: 7px;
        margin-right: auto;
        border-radius: 13px;
        float: left;
        writing-mode: vertical-rl;
        color: white;
        text-orientation: upright;
        font-size: 21px;
        line-height: 38px;
        text-indent: 9px;
      }

      .topfloatImgHolder {
        width: 67%;
        margin-left: 3px;
        margin-right: auto;
        border-radius: 50%;
        float: left;
        padding: 3px;
        height: 35px;
        border: 2px black dotted;
        margin-top: -36px;
      }

      .topfloatImg {
        width: 33px;
        vertical-align: baseline;
        border-radius: 50%;
      }

<html>
  <head>
  
  </head>
  <body>
    <ul style="list-style:none;" >
      <li >
        <div>
          <div  style="background-color: #2196f3;"> item 1</div>
          <div  style="background-color: #2196f3;"> 1 </div>
        </div>
      </li>
      <li >
        <div>
          <div  style="background-color: #48a8da;"> item 2</div>
          <div  style="background-color: #48a8da;"> 2 </div>
        </div>
      </li>
      <li >
        <div>
          <div  style="background-color: #4ac3f0;"> item 3</div>
          <div  style="background-color: #4ac3f0;"> 3 </div>
        </div>
      </li>
      <li >
        <div>
          <div  style="background-color:#00bcd4"> item 3</div>
          <div  style="background-color: #00bcd4;"> 4 </div>
        </div>
      </li>
    </ul>
  </body>
</html>

I made your whole UL flex then removed some item from :hover in css and hope this is what you are looking for.