Menu with submenu with submenu with submenu

Expected output: HW_2014->(hover->submenu->right)NB-8->(hover->submenu->right)NB_8-3
When menu is hover, it should display on right(mean, the submenu are from its parents menu)

Output I got:
HW_2014
NB-8
NB_8-3(one below the other)

<pre lang="CSS">    <style type="text/css">

        .menu{
    width: 82%;
    margin-bottom:10px;
    margin-top:5px;
    height:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    float:left;
}
.menu ul li a:link, div ul li a:visited {
    display: block;
    color:gray;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    width: 100px;
}

.menu ul:after {
        content: ""; clear: both; display: block;
    }

.menu ul li a:hover{
    background: #4b545f;
    height:15px;
    color:White;
        background: linear-gradient(top, #4f5964 0%, #5f6975 100%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 100%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 100%);
}
.menu ul li ul li a:link, li ul li a:visited {
    display: block;
    background-color: #D8DFED;
    color: gray;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 150px;
}
.menu ul li ul li a:hover {
    background-color: #D8DFED;
}
.menu ul {
    padding: 0 0px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
    margin-top:0px;
}
.menu ul li {
   float: left;
    margin-left: 5px;
}
.menu ul li ul li {
    float: left;
    margin-left: 5px;
}
.menu ul li ul {
    display: none;
}
.menu li:hover ul{
    display: block;
}

.menu ul li ul li ul
{
    display: none;
        }
.menu ul li ul li ul li
{
    float:left;
    margin-left:0px;
    }

    </style></pre>
Data to be displayed:
<pre lang="HTML"><div class="menu">
<ul>
  <li>
   <a href='#'>HW_2014</a>
      <ul>
        <li><a href='#'>NB-8</a>
           <ul>
              <li><a href='#'>NB_8-3</a>
              </li>
           </ul>
        </li>
     </ul>
  </li>
</ul>
</div></pre>


Need help ???