I am unable to make the last-child pseudo class affect the last list item. What is the mistake in my css syntax? The URL = <http://chesstao.com>

I am unable to make the last-child pseudo element affect the last list item. What is the mistake in my css syntax?

```
 HTML:
 <section class="top-bar-section">

 <ul class="right"> 

 <li class="has-dropdown">
 <a href="#">instruction</a>
 <ul class="dropdown">
 <li><a class="plain" href="#">Students</a></li>

 <li><a href="#">Products</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">my rates</a></li>

 </ul>
 </li>

 </ul>

 CSS3:

 .top-bar-section ul li.has-dropdown ul.dropdown:last-child {background:red !important;}

```