实现下拉菜单的一个小技巧

下拉菜单这样的功能相信是最常见不过的一种了 虽然很多使用了UI库的项目中有类似组件，但是可能对于实际的需求并不满足，比如我现在这个vue的项目使用的是eleUI

要求实现这么个功能：鼠标浮动上去宽度变宽并且展示下拉列表，一开始当然选择用el-dropdown咯，毕竟有写的效果很好看，但是问题来了el这个组件生成的下拉列表是通过绝对定位在页面中的，那就意味着没法实现在下拉列表hover的时候 上面标题的宽度继续保持变宽，所以想了想还是自己写吧，大概就是这么个结构，hover当然要写在最外层的dom上

<div style="position: relative">
  <div style="height: 20px">
   下拉列表
  </div>
  <div style="position: absolute;top: 20px;">
    <ul>
      <li>下拉列表1</li>
      <li>下拉列表2</li>
      <li>下拉列表3</li>
    </ul>
  </div>
</div>

好的，功能完成了。

这时候我又一想要是下拉列表并不是和上面的标题紧贴着呢，如果有空白的话我这么写当鼠标在中间空白部分的时候 整个hover效果就会消失，所以我又改了一下，简单解决了这个问题

<div style="position: relative">
  <div style="height: 20px">
   下拉列表
  </div>
  <div style="position: absolute;top: 0;padding-top: 20px">
    <ul>
      <li>下拉列表1</li>
      <li>下拉列表2</li>
      <li>下拉列表3</li>
    </ul>
  </div>
</div>