Вложенный div CSS переход не работает

---

Привет
У меня есть панель навигации с выпадающим списком на одном из nav_items. Каждый nav_item имеет CSS-переход в своем свойстве color, и то же самое для дочерних элементов в раскрывающемся списке. Однако переходы детей не работают, и цвет меняется немедленно.

<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; /* doesn't work, no idea why */
}

$(".dropdown_item").mouseover(function(e)
{
        $(this).css("color", "rgb(102,183,226)");
});

$(".dropdown_item").mouseout(function(e)
{
        $(this).css("color", "rgb(200,200,200)");
});

Что я уже пробовал:

---------------------------------------------------------------------------------------------

---