需要我的div下拉菜单隐藏文字时，不要徘徊

我正在尝试使用div做下拉菜单。 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; 
}

来源

2013-05-14 Anton Parment

更改HTML，这样你的下拉列表项目在div

内的有序列表<ul>添加一些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(); 
}

来源

2013-05-14 18:56:55 StoicJester

您可以使用CSS列表中出现：

overflow: hidden;

在.dropdown类。

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

here's a fiddle

来源

2013-05-14 19:00:09

我不知道你可以这样做。很酷。它看起来不是超级可扩展的，但它很酷。 – StoicJester

需要我的div下拉菜单隐藏文字时，不要徘徊

回答

相关问题