Insert submenu with css error

I am using this template that doesn't support sub menu natively but i really like its design: zStartup

The HTML structure of my menu is:

<div id="menu">
        <nav>
            <div class="wrap-nav">
               <ul>
                 <li><a href="#">Home</a></li>

      <li><a href="#">Projects</a>
       <ul class="sub-menu">
        <li><a href="#">Blog</a></li>
     <li><a href="#">Services</a>
   <ul class="sub-menu">
   <li><a href="#">ONE</a></li>
 <li><a href="#">TWO</a></li>
</ul>
 </li>

   </ul>

   </li>        
       </ul>
            </div>
        </nav>
    </div>

The CSS for submenu-less version, as in the template is:

nav {display:inline-block; z-index:1111; position:relative; float:right;}
ul.menu {margin:28px 10px 0px 0px; display:inline-block;}
ul.menu li {float:left; line-height:30px; margin:0px 0px 0px 48px;}
ul.menu li:hover, ul.menu li.current {}
ul.menu li a {font-size:25px; line-height:30px; color:#f2f2f2;  display:inline-block; }
ul.menu li a:hover , ul.menu li.current a { color:#ff9000; }

I added the following to accomodate the submenu with unwanted effects as shown in the pictures:

 ul.menu li ul { display:none; list-style:none;top:30px; left:auto; float:right; text-align:left;position:relative; width:200px !important; border:1px solid blue;z-index:10000; }

 ul.menu li:hover > .sub-menu { display:block;    } 
.sub-menu li {display:block;}
 .sub-menu li a {

display:block; height:40px;font-size: 0.89em;padding:5px 30px; }

The width:200px was a desperate move as it refused to show the submenu vertically (i assumed display:block would do the trick).

Anyway, the above codes shows the following result, which is ugly:

Any input?