鼠标移动悬停到（Main - 1）导致缓慢向下移动（下拉菜单）（Level 1 - 1）到（Level 1 - 4）。
鼠标移动翻转到（主 - 2）使下拉菜单慢慢向下移动。
UL然后LI（Main - 1）在悬停然后UL然后出现LI（Level 1 - 1）到（Level 1 - 4）慢慢下拉菜单。
不用担心（Main - 4）忽略它。
我不知道放在哪里＆＃34; -webkit-transition：身高2.75s轻松.5s;＆＃34;进入ul和li？
/*
Where can I put drop down menu slwoly?
-webkit-transition: height 2.75s ease .5s;
-moz-transition: height 2.75s ease .5s;
-ms-transition: height 2.75s ease .5s;
-o-transition: height 2.75s ease .5s;
transition: height 2.75s ease .5s;
and
-webkit-transition: opacity 2.75s ease .5s;
-moz-transition: opacity 2.75s ease .5s;
-ms-transition: opacity 2.75s ease .5s;
-o-transition: opacity 2.75s ease .5s;
transition: opacity 2.75s ease .5s;
*/
/*Begin Horizontal Tag.*/
/*Set the parent <li>'s CSS position property to 'relative'.*/
ul {
z-index: 999;
list-style:none;
line-height: 150%;
padding:0px;
margin:0px auto 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: -ms-fit-content;
width: -o-fit-content;
width: fit-content;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
ul li {
display: block;
padding: 0px 10px 0px 10px;
position: relative;
float: left;
border-left: 3px solid lightgray;
border-right: 3px solid lightgray;
background: -webkit-linear-gradient(top, #534b4f 0%,#cc5500 100%);
background: -moz-linear-gradient(top, #534b4f 0%,#cc5500 100%);
background: -ms-linear-gradient(top, #534b4f 0%,#cc5500 100%);
background: -o-linear-gradient(top, #534b4f 0%,#cc5500 100%);
background: linear-gradient(top, #534b4f 0%,#cc5500 100%);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}
/*The CSS to hide the sub menus.*/
li ul {
display:none;
}
ul li a {
display: block;
padding: 0px;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
}
ul li a:hover {
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
}
/*try*/
li li {
}
/*Try*/
li:hover li {
float: none;
}
li:hover {
background: #000000;
}
li:hover li a:hover {
}
.main-navigation li ul li {
border-top: 0px;
}
/*Display second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
left: 100%;
top: 0px;
}
/*Simple clearfix.*/
ul:before, ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after {
clear: both;
}
<ul>
<li><a href="#">Main - 1</a>
<ul>
<li><a href="#">Level 1 - 1</a></li>
<li><a href="#">Level 1 - 2</a></li>
<li><a href="#">Level 1 - 3</a></li>
<li><a href="#">Level 1 - 4</a></li>
</ul>
</li>
<li><a href="#">Main - 2</a>
<ul>
<li><a href="#">Level 2 - 1</a>
<ul>
<li><a href="#">Level next 2 - 1</a></li>
<li><a href="#">Level next 2 - 2</a></li>
<li><a href="#">Level next 2 - 3</a></li>
<li><a href="#">Level next 2 - 4</a></li>
</ul>
</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 - 3</a>
<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>
</ul>
</li>
<li><a href="#">Main - 4</a></li>
</ul>
答案 0 :(得分：0)
如果要进行不透明度过渡，则不能在样式中使用display none / block。您应该使用不透明度值来隐藏＆amp;显示内容。这应该放在ul＆gt; li> UL。
有高度，同样的问题。您需要使用高度才能使用高度过渡（而不是显示）。对于高度情况，逻辑上的位置是将它放在相同的ul> li> ul但是当前的样式是不可能的，因为ul内容是浮动的（因此ul高度定义没有任何效果）。另外，高度转换不起作用于0px =＆gt; auto / 100％所以解决方案是使用max-height值＆amp;过渡而不是。
如果有人发现他们有异常/不正确，请随时更正我的陈述/假设。
因此，这种造型会产生你所追求的东西（假设我正确理解了所需的结果）。结果显示在fiddle。
中/*Begin Horizontal Tag.*/
/*Set the parent <li>'s CSS position property to 'relative'.*/
ul {
z-index: 999;
list-style:none;
line-height: 150%;
padding:0px;
margin:0px auto 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: -ms-fit-content;
width: -o-fit-content;
width: fit-content;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
ul li {
display: block;
padding: 0px 10px 0px 10px;
position: relative;
float: left;
border-left: 3px solid lightgray;
border-right: 3px solid lightgray;
background: -webkit-linear-gradient(top, #534b4f 0%,#cc5500 100%);
background: -moz-linear-gradient(top, #534b4f 0%,#cc5500 100%);
background: -ms-linear-gradient(top, #534b4f 0%,#cc5500 100%);
background: -o-linear-gradient(top, #534b4f 0%,#cc5500 100%);
background: linear-gradient(top, #534b4f 0%,#cc5500 100%);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}
ul > li > ul > li {
max-height: 0px;
}
/*The CSS to hide the sub menus.*/
li ul {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
ul li a {
//display: block;
padding: 0px;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 1.75s ease 4s;
-moz-transition: opacity 1.75s ease .4s;
-ms-transition: opacity 1.75s ease .4s;
-o-transition: opacity 1.75s ease .4s;
transition: opacity 1.75s ease .4s;
}
li:hover > ul > li {
max-height: 1000px;
-webkit-transition: max-height 2.75s ease .5s;
-moz-transition: max-height 2.75s ease .5s;
-ms-transition: max-height 2.75s ease .5s;
-o-transition: max-height 2.75s ease .5s;
transition: max-height 2.75s ease .5s;
}
/*try*/
li li {
}
/*Try*/
li:hover li {
float: none;
}
li:hover {
background: #000000;
}
li:hover li a:hover {
}
.main-navigation li ul li {
border-top: 0px;
}
/*Display second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
left: 100%;
top: 0px;
}
/*Simple clearfix.*/
ul:before, ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after {
clear: both;
}