html+css+js鼠标悬浮出现选项浮窗，并可以在浮窗内操作

效果图：

html代码：

<li id="o1">其他</li> 
//下面是需要隐藏的div
<div id="o2"> //这个div内的内容自定义
    <ul>
        <li><a href="">奇幻</a></li>
        <li><a href="">仙侠</a></li>
        <li><a href="">现实</a></li>
        <li><a href="">军事</a></li>
        <li><a href="">游戏</a></li>
        <li><a href="">悬疑</a></li>
        <li><a href="">体育</a></li>
    </ul>
</div>

js代码

other-mouse

window.onload = function(){
  var om = document.getElementById("o1"); //o1是需要悬浮的选项，这里需要同步你的标签id或class名称
  var ob = document.getElementById("o2"); //o2是需要隐藏的div
  ob.style.display = "none";
  ob.onmouseover = om.onmouseover = function(){
      if(timer) clearTimeout(timer)
      ob.style.display = "block";
  }
  ob.onmouseout = om.onmouseout = function(){
      
      timer = setTimeout(function(){
          ob.style.display = "none";
      },400);

  }
}

css代码：

//隐藏的div样式请自定义，
#other-box{
    margin-right: 20px;
    height: 280px;
    width: 80px;
    margin-top: 3px;
}

给前端小白的提示：

// 这句写在head标签内，目的是引入外部js文件，也可以直接写script在代码后面
    <script type="text/javascript" src="这里写js文件地址"></script> 

//如果遇到div显示后，把其他div挤走的现象使用以下css样式
    z-index: 999;
    position: absolute; 

效果展示：

鼠标悬浮出现浮窗