Css menu deroulant

<div class="navigation">
        <ul>
          <li><a href="http://index.php">Accueil</a></li>
         <li><a href="http://livres.php">Livres</a></li>
          <li><a href="#">Cours</a>
            <ul>
              <li><a href="">Mathématique</a></li>         
              <li><a href="">Science</a></li>
              <li><a href="">francais</a></li>
              <li><a href="">anglais</a></li>
            
            </ul>
          </li>
          <li class="last-nav"><a href="">contact</a></li>
          
        </ul>
      </div>

 .navigation {
 float:right;
 width:725px;
 padding-top:20px;
}
.navigation ul{
 float: right;
 margin:0;
 padding:0;}
.navigation ul li {
 display:inline-block;
 padding: 0px 10px}
.last-nav  {
 padding:0 0 0 15px !important}

.navigation ul li a{
 position:relative;
 z-index:8;
 font-family:'Federo', arial;
 color:#fd3cc0;
 text-decoration:none;
 font-size:15px;
 padding:0 5px 7px 2px;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}
.navigation ul li ul li a{ font-family:Arial, Helvetica, sans-serif; line-height:25px; font-size:14px;}
.navigation ul li ul {
 float:left;
 margin-top:7px;
 padding:10px;
 background: rgba(255, 255, 255, 0.9);
 position:absolute;
 z-index:6;
 width:165px;
 display:none}

 .navigation li ul li a:hover {
  text-decoration:underline;
 }
.navigation li ul li a:hover {
 color: #fd3cc0;
 border:none;}
.navigation ul li:hover  ul {
 display:block}

.navigation ul li a:hover ul  {
 display:block}
.navigation a:hover{
 border-bottom:3px solid #fd3cc0;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}