Need make pure css menu with 3 level - html

Question

I make pure css menu with 2 levels .But now I need to make it 3 levels .I tried many time but not working for me . here is the jsfiddle .
I don't need any jquery code, just pure css .
CSS
#menu {
width: 980px;
height: 30px;
float: left;
border-top: dashed 1px #d8d8d8;
margin-left: 7px;
}
#menu ul.Mainmenu {
width: 996px;
margin: 0px;
padding: 0px;
margin-top: 10px;
}
#menu ul.Mainmenu li {
float: left;
list-style: none;
margin-right: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #860300;
margin-right: 16px\9; /* IE8 and below */
position: relative;
height: 30px;
}
#menu ul.Mainmenu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #860300;
}
ul li ul {
padding: 0;
position: absolute;
top: 25px;
left: -10px;
width: 190px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
z-index: 100000;
width: 200px;
background-color: #FFF;
padding: 7px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
ul li ul li {
color: #fff;
float: left;
width: 190px;
height: auto !important;
min-height: 20px;
margin-bottom: 9px;
line-height: 18px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding-top: 3px;
padding-left: 3px;
}
ul li ul li a {
color: #fff;
font-size: 12px !important;
}
ul li ul li:hover {
background: #820B06;
color: #FFF;
}
ul li ul li:hover a {
color: #FFF !important;
}
ul li:hover ul {
opacity: 1;
visibility: visible;
}
Thanks guys

Answer 1

See this example
css
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
margin:0;
padding:10px 20px;
position:relative;
height:20px;
line-height:20px;
background-color:#EEE;
}
#nav > ul > li {
float: left;
height:30px;
line-height:30px;
background-color:#CCC;
}
#nav li > ul{
visibility:hidden;
width:200px;
position: absolute;
top:0px;
left:200px;
border-left:1px solid #000;
}
#nav > ul > li > ul{
top:50px;
left:0;
}
#nav li:hover{
background-color:#999;
}
#nav li:hover > ul{
visibility:visible;
}
html
<div id="nav">
<ul>
<li>Level 1
<ul>
<li>Level 2-1</li>
<li>Level 2-2
<ul>
<li>Level 3-1</li>
<li>Level 3-2</li>
</ul>
</li>
</ul>
</li>
</ul>

Answer 2

Here i added sample CSS Menu with level 3. Please check and let me know. Hope it should helpful for you. Thanks.
.third-level-menu
{
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li
{
height: 30px;
background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
<ul class="top-level-menu">
<li>About</li>
<li>Services</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Contact</li>
</ul>
I have also put together a live demo here http://jsfiddle.net/4ScFz/400/ that's available to play with.