悬停时的div以及滚动页面时的div

Question

我陷入了困境，需要一些人来帮助我。 创建了一个样本小提琴来解释其功能。

当我将鼠标悬停在li标记上时，相应的div就会被悬停。我希望将对应的div标签的所有li显示在同一位置，因此将position用作fixed。

但是，问题是，当光标放在悬停的div上并且滚动页面时，悬停的div随滚动一起被拖动，这是不应该发生的。有人可以帮我解决这个问题吗？

这是问题的屏幕截图

.lidiv {
  display: none;
}

.ulclass li:hover .lidiv {
  display: block
}

.ulclass {
  list-style: none
}

.lidiv {
  position: fixed;
  left: 20%;
  top: 0px;
}

<div class="divoneclass">
  <ul class="ulclass">
    <li class="liclass">
      <a class="aclass" href="javascript:void(0)">
        <span class="spanclassupp">
          <span class="spantitle">DOG</span>
        </span>
      </a>
      <div class="lidiv">
        <div class="lidivone">
          <div class="lidivtwo">
            <div class="lidivthree">
              <div class="lidivfour">
                <div class="diccontent">
                  <p>
                    LI ONE VALUE
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="liclass">
      <a class="aclass" href="javascript:void(0)">
        <span class="spanclassupp">
          <span class="spantitle">CAT</span>
        </span>
      </a>
      <div class="lidiv">
        <div class="lidivone">
          <div class="lidivtwo">
            <div class="lidivthree">
              <div class="lidivfour">
                <div class="diccontent">
                  <p>
                    LI TWO VALUE
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="liclass">
      <a class="aclass" href="javascript:void(0)">
        <span class="spanclassupp">
          <span class="spantitle">OTHER</span>
        </span>
      </a>
      <div class="lidiv">
        <div class="lidivone">
          <div class="lidivtwo">
            <div class="lidivthree">
              <div class="lidivfour">
                <div class="diccontent">
                  <p>
                    LI THREE VALUE
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>