导航悬停在bootstrap中

Question

当我在第二个＆＃34; li＆＃34;我想看一些div。 我在底部看到这个隐藏的div，但我想在右侧看到它， 您可以在第三个屏幕上看到我想要做的事情。

CSS：

#categories {
    display: none;
    left: 450px;
    top: 150px;
    height: 200px;
    width: 200px;
    background-color: red;
    clear: both;
}
.categories:hover #categories {
    display:block;

}

HTML：

<li class="categories">
<a href="#" class="menu"><img src="assets/img/icons/folders.svg" alt="" class="menu-icon"> მიმართულებები</a>
<div id="categories">some thing</div>
</li>

屏幕1：悬停前

屏幕2：悬停

屏幕3：我想看到的内容

谢谢！

Answer 1

通过下面给出的css代码，您可以获得所需的结果

#categories {
display: none;
height: 200px;
width: 200px;
background-color: red;
margin-left:26%;
margin-top:-4%;
}
.categories:hover #categories {
display:block;
}

链接到它的小提琴是http://jsfiddle.net/6d0n80mt/11/