UL LI drop down menu slowly move down - css

Question

Mouse move hover to (Main - 1) cause move slowly down (drop down menu) on (Level 1 - 1) to (Level 1 - 4).
Mouse move rollover to (Main - 2) make drop down menu slowly move down.
UL then LI (Main - 1) on hover then UL then appear LI (Level 1 - 1) to (Level 1 - 4) slowly drop down menu.
Not worry about (Main - 4) ignore it.
I don't know where put "-webkit-transition: height 2.75s ease .5s;" into ul and 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>Main - 1
<ul>
<li>Level 1 - 1</li>
<li>Level 1 - 2</li>
<li>Level 1 - 3</li>
<li>Level 1 - 4</li>
</ul>
</li>
<li>Main - 2
<ul>
<li>Level 2 - 1
<ul>
<li>Level next 2 - 1</li>
<li>Level next 2 - 2</li>
<li>Level next 2 - 3</li>
<li>Level next 2 - 4</li>
</ul>
</li>
<li>Level 2 - 2</li>
<li>Level 2 - 3</li>
<li>Level 2 - 4</li>
</ul>
</li>
<li>Main - 3
<ul>
<li>Level 3 - 1</li>
<li>Level 3 - 2</li>
<li>Level 3 - 3</li>
<li>Level 3 - 4</li>
</ul>
</li>
<li>Main - 4</li>
</ul>

Answer 1

If you want to have opacity transitions, then you cannot use the display none/block in your styles. You should use then opacity values for hiding & displaying content. And this should be placed in the ul > li > ul.
With heights, same issue. You need to play with the heights in order to use the height transition (not with display). For heights case the logical place would be to place it in the same ul > li > ul but this is not possible with the current styling as that ul contents are floating (and thus that ul height definition doesn't have any effect). Additionally height transition doesn't work from 0px => auto/100% so the solution is to use max-height values & transition instead.
Please feel free to correct my statements / assumptions above if someone finds them strange/incorrect.
So this styling would result in what you're after (assuming that I understood the desired result correctly). Result visible in this 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;
}