Menu hover

<div id="menu">
<ul>
 <li>
  <a href="#">Menu 1</a>
 </li>
 <li>
  <a href="#">Menu 2</a>
  <ul>
   <li>
    <a href="#">Sous Menu I</a>
   </li>
   <li>
    <a href="#">Sous Menu II</a>
   </li>
  </ul>
 </li>
 <li>
  <a href="#">Menu 3</a>
 </li>
 <li>
  <a href="#">Menu 4</a>
  <ul>
   <li>
    <a href="#">Sous Menu III</a>
   </li>
   <li>
    <a href="#">Sous Menu IV</a>
    <ul>
     <li>
      <a href="#">Sous Sous Menu A</a>
     </li>
     <li>
      <a href="#">Sous Sous Menu B</a>
     </li>
    </ul>
   </li>
  </ul>
 </li>
 <li>
  <a href="#">Menu 5</a>
 </li>
 <li>
  <a href="#">Menu 6</a>
 </li>
 <li>
  <a href="#">Menu 7</a>
 </li>
 <li>
  <a href="#">Menu 8</a>
 </li>
</ul>
</div>

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
}

#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:blue;
}

#menu li a {
 display:block;
 color:black;
 text-decoration:none;
 padding:5px;
 font-size:16px;
 line-height:15px;
 border-top: none;
 border-left: none;
}

#menu li a:hover {
 color:#FFD700;
 text-decoration: underline;
}

#menu ul li ul {
 display:none;
}

#menu ul li:hover ul {
 display:block;
}

#menu li:hover ul li {
 float:none;
}

#menu li ul {
 position:absolute;
}

#menu ul li ul li ul {
 display:none;
}

#menu ul li ul li ul li {
 display:none;
}

#menu ul li ul li:hover ul {
 display:block;
 position:absolute;
 margin:-25px 0 0 110px;
}

#menu ul li ul li:hover ul li {
 display:block;
}