CSS-Sub menu disappears on hover but displays sub sub menu's - css

Question

When I hover over menu it displays the sub menu. And if i hover over sub menu it displays the sub sub menu but the sub menu disappears.
Ex. test test-1 test-2 is the menu and test-2 contains 3 sub menus like test-21 test-22 test-23.
and the test-21 contains 2 sub sub menu like test-211 test-212. If i hover over test-2, it displays test-21, test-22, test-23. And if I hover over test-21 it displays test-211, test-212 but test-21 disappears.

Answer 1

try this
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
h1,p {
text-align:center;
font-family: 'Bree Serif', 'serif';
}
h1 {
font-size:60px;
}
p {
font-size:20px;
}
nav { margin:100px auto; width:800px; }
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
display:block;
}
nav ul li {
float:left;
display:list-item;
list-style: none;
background-color:#64abfb;
border-bottom: 5px solid #2ecc71;
}
nav ul li a {
display:block;
padding:15px 10px;
color:#FFF;
font-size:20px;
text-decoration:none;
font-family: 'Bree Serif', 'serif';
}
li a:hover { background-color: #2ecc71; }
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' »'; }
li > a:only-child:after { content: ''; }
/* The Dropdown Styles */
/* =================== */
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute; top: 58px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:list-item;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
position: relative;
border-bottom:none;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: absolute relative;
top:-58px;
left:170px;
}
<p>Dropdowns are marked with " » "<br/>
</p>
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
<!-- Second Tier Drop Down -->
<ul>
<li>HTML/CSS</li>
<li>jQuery</li>
<li>Other</li>
</ul>
</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>