0

我正在尝试使用 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;
}
4

2 回答 2

1

你可以使用css：

overflow: hidden;

在 .dropdown 类中。

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

这是一个小提琴

于 2013-05-14T19:00:09.670 回答
0

更改您的 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();
}
于 2013-05-14T18:56:55.740 回答