导航栏悬停事件内联，我无法移动它？

Question

由于我是自己学习，所以我真的不知道该怎么解释。如有任何错误，我谨致歉意。

我正在尝试仅使用css将该导航栏下拉列表，因为javaScript仍然让我有些头疼，而且我得到了奇怪的行为。弹出的侧边栏有一些JavaScript，因此说它的纯CSS并不准确，但这不是重点。与奇数行为相关，例如，如果我说放置绝对位置，则元素不会在悬停事件上显示...奇数。如果我什么都不放，它将显示在组中最后一个Li的左侧，但是由于我未指定定位机制，因此我似乎无法将其向下推到主栏下方。

我想我可能应该将UL换成div，因为我希望它占用相当大的空间，但是如果我现在无法使其工作，那么增加更多的复杂性可能不是一个好主意。如果有人可以看看我的代码并告诉我如何处理它，我将不胜感激。我们主要关注.whodrop，.drop和.whocat

.navbariq {
  background-color: #fff;
  overflow: hidden;
  height: 100px;
  width: 100%;
  text-align: center;
  /* position: fixed; */
  color: #000;
  z-index: 8;
}

.navbariq a {
  float: right;
  position: relative;
  /* left: -50%; */
  /* display: block; */
  text-align: center;
  /* padding: 0px 16px 0px 10px; */
  /* text-decoration: none; */
  /* font-size: 17px; */
  /* margin: 35px 0 0 0; */
  /* margin: 5px; */
}

.navbariqtop a{
  /* padding: 0; */
  padding: 0px 16px;
  /* float: right; */
  /* position: relative; */
  left: -10em;
}

.navbariqbottom a {
  /* padding: 0; */
  /* float: right; */
  left: -10em;
  padding: 0px 16px;
}

.openslide {
  /* float: right;
  padding: 10px; */
  position: absolute;
  top: 0;
  right: 10px;

}

.navbariq ul {
  margin: 8px 0 0 0;
  list-style: none;
}

.openslide a {
  text-decoration: none !important;
}

.navbariq a:hover {
  background-color: #ddd;
  color: #000;
}
.whocat{
  margin-top: 5px;
}
.whodrop .drop{
  visibility: hidden;
  /* position: absolute; */
  /* top: 105%; */
  /* left: 0; */
  transition: 0.2s 1s;
  z-index: 40;
}
.whodrop:hover .drop{
  visibility: visible;
  transition-delay: 0s;
  z-index: 40;
}

.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  background-color: #fff;
  opacity: 0.99;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}

.side-nav a {
  padding: 10px 10px 10px 30px;
  text-decoration: none;
  font-size: 22px;
  color: #ccc;
  display: block;
  transition: 0.3s;
}
.side-nav bold {
  font-size: 200px;
}

.side-nav a:hover {
  color: #000;
}

.side-nav .btn-close {
  position: absolute;
  top: 28px;
  right: 10px;
  font-size: 50px;
  margin-left: 50px;
}

.main {
  transition: margin-right 0.5s;
  /* overflow: hidden; */
  width: 100vh;
}

.logo {
  max-width: 90px;
  height: auto;
  position: fixed;
  top: 8px;
  left: 10px;
  z-index: 20;
}

<nav class="navbariq">
    <ul class="navbariqtop">
        <li><input type="text" name="search" placeholder="Search..."></li>
        <li><a href="Contact.php">Contact us</a></li>
        <li><a href="careers.html">Careers</a></li>
        <li><a href="Investors.html">Investors</a></li> 
        
    </ul>
<br>  
    <a href="#"><img class="logo" src="iQ.png"></a>  
<br>
    <ul class="navbariqbottom">
        <li><a href="Technology.html">Technology</a></li>
        <li><a href="Sustainability.html">Sustainability</a></li>
        <li><a href="Media.html">Media</a></li>
        <li><a href="What we do.html" >What we do</a></li>
        
        <li class="whodrop"><a href="Who we are.html">Who we are</a>
            <ul class="drop">
                <li class="whocat"><a href="whotest1.html">Whotest  1</a></li>
            </ul>
        </li> 
    </ul>

<br>
    
    <span class="openslide">
            <a href="#0" onclick="openSlideMenu()">
                <svg width="120" height="90">
                    <path stroke-linecap="round" d="M37,20 90,20" stroke="#ccc" stroke-width="12" />
                    <path stroke-linecap="round" d="M37,35 90,35" stroke="#ccc" stroke-width="12" />
                    <path stroke-linecap="round" d="M37,50 90,50" stroke="#ccc" stroke-width="12" />
                    <text x="42" y="75" fill="ccc">Menu</text>
                </svg>
            </a>
    </span>
</nav>

<br>

<div id="side-menu" class="side-nav">
    <a href="#0" class="btn-close" onclick="closeSlideMenu()">&times;</a>
    <li><a href="Technology.html" class="bold">Technology</a></li>
    <li><a href="Sustainability.html" class="bold">Sustainability</a></li>
    <li><a href="Media.html" class="bold">Media</a></li>
    <li><a href="What we do.html">What we do</a></li>
    <li><a href="Who we are.html">Who we are</a></li>
    <li><a href="Investors.html">Investors</a></li>
    <li><a href="careers.html">Careers</a></li>
    <li><a href="Contact.php">Contact</a></li>
</div>