悬停在li元素上时的过渡效果

Question

I'm trying to add an ease-in transition when one hovers on the <li> element, so that the <ul> element ca ease-in. Here's my html:

 <header>
        <nav>
            <div id="logo" style="color: white" class="try">Techflow</div>
            <label for="drop" class="toggle">Menu</label>
            <input type="checkbox" id="drop" />
            <div class="pull-left">
                <ul class="menu">
                    <li>
                        <label for="drop-1" class="toggle">Tech News</label>
                        <a href='@Url.Action("Index","Home")'>Tech News</a>
                        <input type="checkbox" id="drop-1" />
                        <ul>
                            <li><a href="@Url.Action("TechEvolution", "Tech")">Tech Evolution</a></li>
                            <li><a href="@Url.Action("Tablets", "Tech")">Tablets</a></li>
                            <li><a href="@Url.Action("Smartphones", "Tech")">Phones</a></li>
                            <li><a href="@Url.Action("InternetTV", "Tech")">Internet TV</a></li>
                            <li><a href="@Url.Action("UncappedInternet", "Tech")">Uncapped Internet</a></li>
                            <li><a href="@Url.Action("ReviewAndAdvice", "Tech")">Reviews and Advise...</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

and here's my css:

header nav div ul li ul:hover{
    transition: ease-in 3s ease;
}

Answer 1

You have a selector with more 4 level of deep, is a good practice that not nested more 3 levels of deep because es more reusable, if you change any elements or add a element your selector not work

Your question, that proprieties should have the element father, and the elements li, have the property that you need change

Answer 2

first things first, your selector should be on the last li:hover

header nav div ul li:hover ul{
    /* CSS magic */
}

CSS doesn't have a ease-in transition, you're might be thinking of jQuery fadeIn ? Either way, CSS transitions work like this:

transition: [property|all] [duration] [timing function] [delay];

For instance, if you'd want to ease in from hidden to visible:

header nav div ul li ul{
    transition: opacity .33s ease;
    opacity: 0;
}
header nav div ul li:hover ul{
    opacity: 1;
}