Insert submenu with css error - css

Question

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>Home</li>
<li>Projects
<ul class="sub-menu">
<li>Blog</li>
<li>Services
<ul class="sub-menu">
<li>ONE</li>
<li>TWO</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?

Answer 1

You have several issues in your code. Here are a couple of informations that can help you:
Rule #1: Always format your code properly. Trust me that will make a difference!
You are using a menu class in your css but there is none in your html (it's an id not a class).
I show you below the mechanism of sub-menu in pure css, with that you'll have everything you need to make yours.
ul {
/* We are removing default styles of ul */
list-style: none;
padding: 0;
margin: 0;
}
ul li {
/* Applies to all li */
display: block;
float: left;
position: relative; /* this will make the sub-menu positionned relatived to the hovered li */
}
ul li + li {
margin-left: 28px; /* just to space your li */
}
li ul {
display: none; /* Hides the submenu */
text-align: right; /* Display sub-menu text on the right */
}
ul li a {
/* Your styles for the links here I let browser's defaults */
}
ul li a:hover {
/* Your styles for the links when hovered */
color: #ff9000;
}
li ul li + li {
margin-left: 0; /* Remove the margin between li that we applied above */
}
li:hover > ul {
display: block; /* On hover show sub-menu */
position: absolute;
}
li:hover li {
float: none; /* Remove floating for sub-menu li so that li displays one above the other */
}
ul ul ul {
right: 100%; /* position sub-menu of sub-menu to the left of the parent submenu */
top: 0;
}
ul ul ul li {
margin-right: 8px; /* Just so that li inside submenu of submenu don't touch parent submenu's li (it depends on the style you want for your menu) */
}
ul::after {
/* Clearfix because we've used float on ul */
content: '';
display: block;
clear: both;
}
<nav>
<ul>
<li>Home</li>
<li>Projects
<ul class="sub-menu">
<li>Blog</li>
<li>Services
<ul class="sub-menu">
<li>ONE</li>
<li>TWO</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>