需要我的div下拉菜单隐藏文本时，不悬停

Question

我正在尝试做一个带有div的下拉菜单。div上的过渡很好，一切都很好。但我不知道如何让下拉框中的文本在我不悬停的时候隐藏起来?

Html代码。虽然不多，但它在下降。我不希望菜单只隐藏它下面的文字。

<div class="dropdown">Menu
    <br/>Games
    <br/>Food 
    </div>

CSS代码。

div.dropdown
{
    position:absolute;
    width:920px;
    height:20px;
    top:110px;
    left:50%;
    margin-left:-460px;
    z-index:1;
    background-color:gray;
    -webkit-transition: height 2s ease;
    background:black;
    text-align:center;
    color:White;
}
div.dropdown:hover
{
    height: 45px;
    -webkit-transition: height 0.1s ease;
}

Answer 1

你可以使用css:

overflow: hidden;

在。dropdown类中

这将允许你隐藏所有显示在元素边界之外的内容。

这里有小提琴

Answer 2

改变你的html，使你的下拉菜单项是在一个有序的列表<ul>在div

添加一些css，使列表通常是隐藏的

div.dropdown ul{
   display:none;
}
div.dropdown ul:hover{
   display: block;
}

同时，删除下拉div的现有高度限制。

，然后一些JavaScript/jQuery使列表出现当你悬停在菜单

$('div.dropdown, div.dropdown ul').on('hover', function(){
   $('div.dropdown ul').show();
}
$('div.dropdown, div.dropdown ul').on('mouseleave', function(){
   $('div.dropdown ul').hide();
}