Html CSS 下拉菜单过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24614200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS dropdown menu transition
提问by Andy Andy
I am trying to add dropdown transition for the menu I am working on, but it seems that I have no idea what I am doing wrong. The menu itself appears instantly, ignorning the transition effect.
我正在尝试为我正在处理的菜单添加下拉转换，但似乎我不知道我做错了什么。菜单本身立即出现，忽略过渡效果。
CSS code I use for transition:
我用于过渡的 CSS 代码：
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
opacity:0;
As far as I know I should add it to the nav ul ulCSS block, and adding opacity:1to nav ul li:hover > ulbut it does not work.
据我所知，我应该将它添加到nav ul ulCSS 块中，并添加opacity:1到nav ul li:hover > ul但它不起作用。
And here's whole code of the menu.
这是菜单的完整代码。
HTML
HTML
<nav>
<ul>
<li><a href="http://www.www.com/">Menu 1</a></li>
<li><a href="http://www.www.com/">Menu 2</a></li>
<li><a>Dropdown Here</a>
<ul>
<li><a href="http://www.www.com/">Dropdown1</a></li>
<li><a href="http://www.www.com/">Dropdown2</a></li>
<li><a href="http://www.www.com/">Dropdown3</a></li>
</ul>
</li>
<li><a href="http://www.www.com/">Menu 4</a></li>
<li><a href="http://www.www.com/">Menu 5</a></li>
</ul>
</nav>
And the CSS I am using
还有我正在使用的 CSS
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 25px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
float:right;
z-index:9999;
}
nav ul ul {
display: none;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
opacity:0;
}
nav ul li:hover > ul {
display: block;
opacity:1;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 30px 20px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
回答by Eternal1
Your transition doesn't fire, because the heightof your elements isn't changed during :hover, only displayand opacity. To make your elements fade in - you need to change your transition property to opacityor all.
您的过渡不会触发，因为height您的元素的 不会在:hover、display和期间发生变化opacity。要使您的元素淡入 - 您需要将过渡属性更改为opacity或all。
If you want to transition height - you need to set your element heightto 0, and then change it on :hover.
如果要转换高度 - 您需要将元素设置height为 0，然后将其更改为:hover。
Be aware though - height transitions work only for specified heightvalue, and won't work for something like height: auto;. There is a workaround for it, as follows:
但请注意 - 高度转换仅适用于指定的height值，而不适用于height: auto;. 有一个解决方法，如下所示：
ul {
transition: all 0.5s;
max-height: 0;
}
ul:hover {
max-height: 200px; //or whatever could be your max-height value - don't overdo it, will be crappy transition.
}
回答by Josh KG
You're transitioning only height, so the element that needs to change on the hover is height.
您仅转换高度，因此需要在悬停时更改的元素是高度。
transition: height 0.3s ease-in;
^^^^^^
Now the hover CSS is changing the opacity and the display properties, see:
现在悬停 CSS 正在更改不透明度和显示属性，请参阅：
nav ul li:hover > ul {
display: block;
opacity:1;
}
So whatever property you want to transition needs to be referenced in the transition statement. You can use "all" for quick way to grab all the changing properties:
所以无论你想转换什么属性，都需要在转换语句中引用。您可以使用“all”快速获取所有更改的属性：
transition: all 0.3s ease-in;
Also note that displayis not a property than can be transitioned. To hide your ul, you can give it height0, and then a specific height on the hover.
另请注意，这display不是可以转换的属性。要隐藏你的ul，你可以给它height0，然后在悬停时给它一个特定的高度。
回答by Milos Miskone Sretin
Try this Step 1. Let's set up our html. We're going to put our menu inside a header, and we're also going to create a "content" area below the header.
试试这个步骤 1。让我们设置我们的 html。我们将把我们的菜单放在一个标题中，我们还将在标题下方创建一个“内容”区域。
A little explanation: This part of the process addresses IE's stacking order, and will ensure that our menu doesn't render behind the Content area, an issue I have seen often. A typical scenario is to have some kind of image scroller under the header, which requires the scroller container to have relative positioning, and causing the menu to render behind the scroller in IE. In order to fix this, our Header MUST must have position:static.
一点解释：这部分过程解决了 IE 的堆叠顺序，并确保我们的菜单不会呈现在内容区域后面，这是我经常看到的一个问题。一个典型的场景是在头部下有某种图像滚动条，这需要滚动条容器有相对定位，并导致菜单在 IE 中呈现在滚动条后面。为了解决这个问题，我们的 Header 必须有 position:static。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 Horizontal sliding menu</title>
<style>
.header{
width: 600px;
height:50px;
border:1px dotted grey;
}
.content{
position:relative;
width: 600px;
height:500px;
color:white;
background-color: #e6056f;
overflow:hidden;
}
.item{
position:absolute;
top:50px;
left:20px;
width: 600px;
height:400px;
background-color: grey;
}
</style>
<body>
<div class="header">
<div class="navigation">
</div>
</div>
<div class="content">
<div class="item">
</div>
</div>
</body>
</html>
Step 2. We're going to use an unordered list to create the menu structure and place it inside the navigation div: (make sure you replace the #'s with actual links, for example: becomes )
第 2 步。我们将使用无序列表来创建菜单结构并将其放置在导航 div 中：（确保将# 替换为实际链接，例如：变成 ）
<ul>
<li><a href="#">Main - 1</a>
<ul>
<li><a href="#">Level 2 - 1</a></li>
<li><a href="#">Level 2 - 2</a></li>
<li><a href="#">Level 2 - 3</a></li>
<li><a href="#">Level 2 - 4</a></li>
</ul>
</li>
<li><a href="#">Main - 2</a>
<ul>
<li>
<ul>
<li><a href="#">Level 3 - 1</a></li>
<li><a href="#">Level 3 - 2</a></li>
<li><a href="#">Level 3 - 3</a></li>
<li><a href="#">Level 3 - 4</a></li>
<li><a href="#">Level 3 - 5</a></li>
</ul>
<a href="#">Level 2 - 1</a>
</li>
<li>
<ul>
<li><a href="#">Level 3 - 1</a></li>
<li><a href="#">Level 3 - 2</a></li>
<li><a href="#">Level 3 - 3</a></li>
<li><a href="#">Level 3 - 4</a></li>
<li><a href="#">Level 3 - 5</a></li>
</ul>
<a href="#">Level 2 - 2</a></li>
<li>
<ul>
<li><a href="#">Level 3 - 1</a></li>
<li><a href="#">Level 3 - 2</a></li>
<li><a href="#">Level 3 - 3</a></li>
<li><a href="#">Level 3 - 4</a></li>
<li><a href="#">Level 3 - 5</a></li>
</ul>
<a href="#">Level 2 - 3</a></li>
<li><a href="#">Level 2 - 4</a></li>
</ul>
</li>
<li><a href="#">Main - 3</a></li>
<li><a href="#">Main - 4</a></li>
</ul>
Step 3. To position the menu horizontally we'll use float:left on the menu items and a couple of basic styles to make it presentable:
步骤 3. 要水平定位菜单，我们将在菜单项上使用 float:left 和一些基本样式以使其具有可展示性：
.navigation {
width:600px;
}
.navigation ul{
/* positioning */
position:relative;
z-index:1000;
/* remove the dots next to list items: */
list-style:none;
/* get rid of any default or inherited margins and padding: */
margin:0;
padding:0;
/* styling: */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 15px;
}
/* we're using the direct descendant selectors > to ONLY affect the main menu items */
.navigation > ul > li {
/* positioning */
position: relative;
float: left;
/* styling: */
margin-right: 10px;
}
.navigation > ul > li > a {
/* positioning */
display:block;
/* styling: */
background-color: #2c2c2c; /* grey */
padding:8px 14px;
text-decoration:none;
color:#aaaaaa;
}
.navigation > ul > li > a:hover{
/* styling: */
background-color:#666666; /* grey */
color:#eeeeee; /* light grey */
}
Step 4. The drop-down boxes. We are going to apply the same styles to secondary and tertiary drop-downs, but you can choose to add additional styles to differentiate them.
步骤 4. 下拉框。我们将对二级和三级下拉列表应用相同的样式，但您可以选择添加其他样式来区分它们。
.navigation ul ul{
background-color:#e6056f; /* remove. this is for illustration purposes only */
width:340px; /* you need a width to accommodate tertiary menus */
position:absolute;
z-index:100;
height: 0;
overflow: hidden;
}
/* don't display tertiary box yet */
.navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
height:0;
}
/* tertiary drop-down box */
.navigation ul ul ul{
left:170px;
width:170px;
}
.navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
.navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
height:220px; /* need a height to accommodate any tertiary menus */
}
/* drop-down item styles */
/* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */
.navigation ul ul li{
background-color:#eaeaea; /* grey */
width:170px;
}
.navigation ul ul li:hover {
background-color:#999; /* grey */
}
.navigation ul ul li a {
display:block;
text-decoration:none;
margin:0 12px;
padding:5px 0;
color:#4c4c4c; /* grey */
}
.navigation ul ul li a:hover, .navigation ul ul li:hover > a {
color:#ffffff; /* white */
}
Step 5 - optional I like to have separator lines between menu items, but only BETWEEN menu items. And I don't want them to go all the way to the edges of the drop-down box either, which means more CSS tweaking, but I think it looks nicer.
第 5 步 - 可选 我喜欢在菜单项之间有分隔线，但只在菜单项之间。而且我也不希望它们一直到下拉框的边缘，这意味着更多的 CSS 调整，但我认为它看起来更好。
Normally we could use :last-child to remove the last line in the list, but since IE doesn't recognize :last-child, we'll use the + selector instead. The following rules insert lines between each menu item, and make sure we don't have any extraneous unwanted lines either. It's a little hairy to get your head around at first, but it works across the board. And since the lines don't go all the way to the edges, it also makes sure there are no weird gaps when you hover over an item.
通常我们可以使用 :last-child 删除列表中的最后一行，但由于 IE 无法识别 :last-child，我们将使用 + 选择器代替。以下规则在每个菜单项之间插入行，并确保我们也没有任何多余的不需要的行。一开始让你的头脑有点毛茸茸的，但它全面工作。而且由于线条不会一直延伸到边缘，因此当您将鼠标悬停在项目上时，它还可以确保没有奇怪的间隙。
.navigation ul ul ul li a{
border:0 !important;
}
.navigation ul ul ul li + li a{
border-top:1px dotted #999 !important;
}
.navigation ul ul li + li a{
border-top:1px dotted #999;
}
.navigation ul ul li:hover + li a{
border-top:1px solid #eaeaea;
}
.navigation ul ul ul li:hover + li a{
border: 0 !important;
}
.navigation ul ul ul li:hover + li{
border-top:1px solid #999 !important;
}
Step 6. THE MAGIC
第 6 步。 魔术
So by now you should have a plain vanilla CSS drop-down menu. Let's add the magic. It's actually going to be really easy.
所以现在你应该有一个普通的 CSS 下拉菜单。让我们添加魔法。这实际上会很容易。
Add these properties to the .navigation ul ul rule:
将这些属性添加到 .navigation ul ul 规则：
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
And these, to the .navigation ul ul li rule:
而这些，对于 .navigation ul ul li 规则：
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
Step 7. Just one more thing if you care about IE 7.
第 7 步。 如果您关心 IE 7，还有一件事。
To remove the gaps between menu items in IE 7, I'm going to add some conditional statements into the top of the file:
为了消除 IE 7 中菜单项之间的间隙，我将在文件顶部添加一些条件语句：
Replace these two lines
替换这两行
<!DOCTYPE HTML>
<html lang="en">
at the top of your file with this:
在您的文件顶部：
<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
and add this rule to the css:
并将此规则添加到 css：
/* unfortunate ie7 gap fix */
.ie7 .navigation ul ul li{
margin-bottom:-3px;
}
That's it!
就是这样！
An optional enhancement: I'm going to add a little arrow to the items that have tertiary menus:
可选的增强功能：我将向具有三级菜单的项目添加一个小箭头：
make an arrow.png graphic, and add this rule to your css:
制作一个 arrow.png 图形，并将此规则添加到您的 css 中：
.arrow{background:url(arrow.png) right center no-repeat;}
add the arrow class to the links that have tertiary menus: ie: Level 2 - 1
将箭头类添加到具有三级菜单的链接：即：Level 2 - 1
