سوال منوی کشویی css

این کد منوی کشویی من

<nav id="dropdown-menu" class="line-menu">
<ul>
<li><a href="#">Home</a></li>
<li class="has-children">
<a href="#">Food
<i class="fa fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li><a href="#">Chef for Hire</a></li>
<li><a href="#">Catering</a></li>
<li><a href="#">Restaurant</a></li>
</ul>
</li>
<li class="has-children">
<a href="#">Classes
<i class="fa fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li><a href="#">Class Schedule</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Breakfast Class</a></li>
<li><a href="#">Brunch Class</a></li>
<li><a href="#">Lunch Class</a></li>
<li><a href="#">Dier Class</a></li>
<li><a href="#">Dessert Class</a></li>
<li><a href="#">Baking Class</a></li>
<li><a href="#">Caing Class</a></li>
<li><a href="#">Shopping Class</a></li>
<li><a href="#">Tools Class</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

وقتی میگم

    .has-children:hover .sub-menu {
display: block;
}

کار نمیکنه! چرا !!!!