我正在尝试为我正在处理的菜单添加下拉过渡，但似乎我不知道我做错了什么。菜单本身立即出现，忽略了过渡效果。
我用于过渡的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;
据我所知，我应该将其添加到nav ul ul CSS块，并将opacity:1添加到nav ul li:hover > ul，但它不起作用。
这里是菜单的全部代码。
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>
我正在使用的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;
}
答案 0 :(得分：5)
您的转换不会触发，因为height期间您的:hover元素未被更改，仅display和opacity。要让您的元素淡入 - 您需要将过渡属性更改为opacity或all。
如果您想要转换高度 - 您需要将元素height设置为0，然后在:hover上更改它。
请注意 - 高度转换仅适用于指定的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.
}
答案 1 :(得分：1)
您只转换高度，因此悬停时需要更改的元素是高度。
transition: height 0.3s ease-in;
^^^^^^
现在悬停CSS正在改变不透明度和显示属性，请参阅：
nav ul li:hover > ul {
display: block;
opacity:1;
}
因此，您希望转换的任何属性都需要在转换语句中引用。您可以使用“all”快速获取所有更改的属性：
transition: all 0.3s ease-in;
另请注意，display不是可以转换的属性。要隐藏ul，您可以将其设为height 0，然后悬停在特定高度。
答案 2 :(得分：1)
试试这个 步骤1。 让我们设置我们的HTML。我们将把菜单放在标题中，我们也会创建一个＆＃34;内容＆＃34;标题下面的区域。
一点解释： 这部分过程解决了IE的堆叠顺序，并确保我们的菜单不会在内容区域后面呈现，这是我经常看到的问题。典型的情况是在标题下面有某种图像滚动条，这需要滚动条容器具有相对定位，并使菜单在IE中的滚动条后面呈现。为了解决这个问题，我们的标题必须有位置：静态。
<!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>
第2步。 我们将使用无序列表来创建菜单结构并将其放在导航div中： （确保用实际链接替换＃＆＃39;例如：变为）
<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>
第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 */
}
第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 */
}
第5步 - 可选 我喜欢菜单项之间有分隔线，但只有BETWEEN菜单项。而且我也不希望它们一直走到下拉框的边缘，这意味着更多的CSS调整，但我认为它看起来更好。
通常我们可以使用：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;
}
第6步。 魔术
所以现在你应该有一个简单的vanilla CSS下拉菜单。让我们添加魔力吧。 实际上它真的很容易。
将这些属性添加到.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;
这些，对于.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;
第7步。 如果你关心IE 7，还有一件事。
要消除IE 7中菜单项之间的差距，我将在文件顶部添加一些条件语句：
替换这两行
<!DOCTYPE HTML>
<html lang="en">
位于文件顶部：
<!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]-->
并将此规则添加到css：
/* unfortunate ie7 gap fix */
.ie7 .navigation ul ul li{
margin-bottom:-3px;
}
那就是它！
可选的增强功能： 我要在有三级菜单的项目中添加一个小箭头：
制作一个arrow.png图片，并将此规则添加到您的css：
.arrow{background:url(arrow.png) right center no-repeat;}
将箭头类添加到具有第三级菜单的链接： 即：2级 - 1