Hi
I have a navigation bar with a dropdown on one of the nav_items. Each nav_item has a CSS transition on its color property, and the same for the child elements in the dropdown. However, the children's transitions don't work and the color changes immediately.
<div class="container nav_grid" id="nav_grid">
<div class="nav_items" id="nav_items">
<div class="nav_item" id="home">HOME</div>
<div class="nav_item dropdown_parent_outer" id="products">
PRODUCTS
<div class="dropdown_menu outer_dropdown" id="products_menu">
<div class="dropdown_item dropdown_parent_outer" id="phone_numbers">
Phone Numbers
<div class="dropdown_menu outer_dropdown" id="phone_numbers_menu">
<div class="dropdown_item">UK Geographic Numbers</div>
<div class="dropdown_item">UK Non-Geographic Numbers</div>
<div class="dropdown_item">International Numbers</div>
<div class="dropdown_item">Number Porting</div>
<div class="dropdown_item">Number Rangeholder Lookup</div>
<div class="dropdown_item">TPS Lookup</div>
<div class="nav_spacer"></div>
</div>
</div>
<div class="dropdown_item dropdown_parent_outer">
Business Broadband
<div class="dropdown_menu outer_dropdown">
<div class="dropdown_item">ADSL</div>
<div class="dropdown_item">FTTC</div>
<div class="dropdown_item">PDSL Phone Broadband</div>
<div class="nav_spacer"></div>
</div>
</div>
<div class="nav_spacer"></div>
</div>
</div>
<div class="nav_item">SUPPORT</div>
<div class="nav_item">CONTACT</div>
<div class="nav_item">RESELLING</div>
<div class="nav_item">WEB PORTAL</div>
</div>
</div>
.dropdown_item
{
padding: 0 0 0 14px;
font-size: 13px;
border-top: 1px solid rgb(80,80,80);
background-color: inherit;
color: rgb(200,200,200);
transition: color 0.5s;
}
$(".dropdown_item").mouseover(function(e)
{
$(this).css("color", "rgb(102,183,226)");
});
$(".dropdown_item").mouseout(function(e)
{
$(this).css("color", "rgb(200,200,200)");
});
What I have tried:
---------------------------------------------------------------------------------------------