实现下拉框及一些需要注意的问题

今天我实现了网页的下拉框，有两种操作思路：即纯css路线和js路线。最终实现的效果是相同的：

效果图
我的html代码,运用了bootstrap的一些基本样式：

<div class="dropdown navbar-right" id="drop">
       <strong class="navbar-text">dong<span class="caret"></span></strong>
       <ul class="dropdown-menu dropdown-menu-right" id="space">
           <li><a href="#">账户管理</a></li>
           <li><a href="#">账户管理</a></li>
           <li><a href="#">账户管理</a></li>
       </ul>
</div>

纯css的实现方法：

#space {
    margin-top: 6px;
    width: auto;
    min-width:initial;
    display: none;
}
#space::before {
    content: '';
    position: absolute;
    top:-5px;
    left: 40px;
    background:inherit;
    padding:5px;
    border:inherit;
    border-right: 0;
    border-bottom:0;
    transform: rotate(45deg);
}
#space::after {
    content: '';
    position: absolute;
    padding: 5px;
    background: transparent;
    top:-8px;
    width:100%;
}
#drop:hover #space {
    display: block;
}

jQuery的实现方法：

jQuery的实现方法取消了前面的样式表中的:hover伪类，转而用jq代码来实现相同的功能：

$("#drop").mouseover(function () {
                $("#space").show();
            }).mouseleave(function () {
                $("#space").hide();
            });

最终实现的效果都是相同的。

解决过程中遇到的一些问题

我最开始的版本中是没有::after伪类的，然后在导航栏和下拉菜单之间就会存在一个6px的间隙，在这个间隙中就只存在margin和一个小小的::before伪类，而光标在margin上是不能触发mouseover事件亦不能被视作hover状态。因此，当你的光标离开导航栏之后能否碰到菜单就只能看你的手速和浏览器的反应速度了。就这么一个小问题今天整整弄了一个下午，真是坑。。。