triple tier drop down menu - html

Question

I have been trying to make a menu that has 3 tiers, for example i want to hover over 'family' and be shown 'holidays' and 'day Trips'. Then I want to hover 'holidays' or 'day trips' and be shown the next options 'videos 1-3'. I have only been doing HTML5 and CSS3 for a few weeks so I am quite green. Any help would be great.
<ul id="menu2">
<li> Family
<ul class="sub-menu2">
<li>Holidays
<li> Video 1 </li>
<li> Video 2 </li>
<li> Video 3 </li>
</li>
<li>Day Trips
<li> Video 1 </li>
<li> Video 2 </li>
<li> Video 3 </li>
</li>
</ul>
</li>
</ul>
CSS
#menu2, ul#menu2 ul.sub-menu2 {
padding:0;
margin-top: -41px;
}
#menu2 li, ul#menu2 ul.sub-menu2 li {
list-style-type: none;
display: inline-block;
width:100px;
left:73%;
margin-bottom:4px;
}
#menu2 li a, ul#menu2 li ul.sub-menu2 li a {
text-decoration: none;
text-align:center;
color: yellow;
background: black;
padding: 5px;
display:inline-block;
width:100px;
border-bottom-right-radius:20px;
border-top-left-radius: 20px;
border: 2px solid yellow;
}
#menu2 li {
position: relative;
}
#menu2 li ul.sub-menu2 {
display:none;
position: absolute;
top: 30px;
right: 72px;
width: auto;
margin-top:6px;
margin-bottom:-2px;
}
#menu2 li:hover ul.sub-menu2 {
display:block;
}
#menu2 li ul.sub-menu2 a:hover {
background-color: yellow;
color: black;
}

Answer 1

Your structure is not correct. It should be like this:
<ul id="menu2">
<li>Family
<ul class="sub-menu2">
<li>Holidays
<ul>
<li>Video 1</li>
<li>Video 2</li>
<li>Video 3</li>
</ul>
</li>
<li>Day Trips
<ul>
<li> Video 1 </li>
<li> Video 2 </li>
<li> Video 3 </li>
</ul>
</li>
</ul>
</li>
</ul>
And you have to modify your CSS a little bit. I made a little dummy here:
generic DEMO Fiddle