CSS -webkit fading in menu - html

Question

So I'm currently trying to get my menu (which worked well before I added the sub-menus) to fade color when hovered. I can't really understand what the problem is but guessing that the webkit function (Again, which worked before and I haven't touched it) isn't really affecting the hover function.
Find code here:
jsfiddle.net/ChH4F

Answer 1

The transition you had was fine but without a hover state on your a tags there is nothing to change.
This is what I added,
ul#navmenu li a:hover {
color: rgba(0, 0, 0, 0.4);
}
This is what I changed since you don't need all,
-webkit-transition: color 0.7s ease;
-moz-transition: color 0.7s ease;
-o-transition: color 0.7s ease;
-ms-transition: color 0.7s ease;
transition: color 0.7s ease;
Here is the JSFIDDLE.
Revision 1 - fading sub-menu links of the same color
Revision 2 - fading sub-menu links of a different color
Drop-Down fading in without JS/jQuery,
ul#navmenu li ul.sub-menu {
position: absolute;
top: 40px;
left: 0;
width: 165px;
background-color:rgba(0, 13, 38, 0.9);
text-align:left;
color:black;
opacity: 0; /* Used to make it fade */
height: 0; /* Used to make it fade */
overflow: hidden; /* Used to make it fade */
}
ul#navmenu li:hover ul.sub-menu {
opacity: 1; /* Used to make it fade */
height: auto; /* Used to make it fade */
overflow: none; /* Used to make it fade */
}
Also don't forget to add the css-transitions to your main ul, ul.sub-menu.
Fade-in-out Menu
What you are forgetting to add,
ul#navmenu, ul#navmenu ul.sub-menu {
margin: 0px;
padding: 0;
padding-top:px;
list-style-type: none;
list-style-image: none;
width: auto;
height: auto;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
You need the transition: all 0.6s ease; on the element that is changing or it will just show/hide.