Div滑动在另一个div上

Question

我有2个div元素。

<div id='container'> 
<div class="click_menu yellow"> 
    <p><a href="#">Hover Me</a></p> 
    <p class="subtext">The front page</p> 
</div> 
<div class="content"> <p>Content</p> </div> 
</div> 

当我将鼠标悬停在第一个div上时，我想滑过第二个div的顶部。没有把它推下去。

JSFiddle Link

我该怎么办呢？

感谢

Answer 1

不知道如果我理解你的问题，但看看这有助于

使用下面的CSS：

.click_menu{ 
    position:relative; 
    z-index : 1; 
} 
.content { 
    position:absolute; 
    top: 58px; 
} 

所以相对的div会在绝对DIV作为z-index是1.

JSFIDDLE

Answer 2

你可以改变在下面的CSS

.content { 
    margin-top:50px;//added 
    position:absolute;//changed 
    clear: both; 
    width:100px; 
    height:50px; 
    background:#D52100;  
} 

.click_menu{ 
    width:100px; 
    height:50px; 
    float:left; 
    color:#191919; 
    text-align:center; 
    position: absolute;// added 
    z-index: 100;//added 
} 

Demo

Answer 3

除非你想要做一些真正的习俗，有一个在重新发明轮子是没有意义的。 Bootstrap为你做了很多工作。

http://getbootstrap.com/components/#nav-dropdowns