Why is my transition not being applied to the submenu <a> tag? The color change is working fine, but the transition does not occur on hover. When I use the same rules on another element with a different main class, it works perfectly. It seems like the issue lies with nested elements or CSS subclasses/selectors. Any suggestions?
Below is the structure of my HTML, JS, and CSS:
$( document ).ready(function() {
$('.menu_container').mouseover(function(e) {
$('ul', this).show();
});
$('.menu_container').mouseout(function(e) {
$('ul', this).hide();
});
});.menu { background:#f8f8f8; color:#707070; text-align:center; }
.menu li { margin-bottom:0 }
.menu li { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8; }
.menu li:hover { background-color:#022a3b; background-color:#022a3b; border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; }
.menu li a:hover { color:#06a7ea; }
.menu li span { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container { position:relative; display:inline-table; }
.menu li.menu_container ul { display:none; position:absolute; top:51px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container ul li { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover { color:#FF0000; }<nav class="container-fluid menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li class="menu_container">
<span>Home
<ul>
<li><a href="/">Test</a></li>
<li><a href="/">Test</a></li>
<li><a href="/">Test</a></li>
</ul>
</span>
</li>
</ul>
</nav>Check out the live example here.