how to understand navigation bar CSS with drop down menu?

how to create a navigational bar with drop down menu?
i found this CSS code for navigational bar with drop down menu somewhere else in google.
but i need to know every step, why they use "nav ul ul" so many times, why can't they use "nav ul ul" one time?
please explain the below code?

nav ul ul {
	display: none;
}
 
	nav ul li:hover > ul {
		display: block;}
 
nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 

CSS Menu which shows Level 1, 2 and 3 list items on top level rollover

I wish to create a menu system that shows all of the sub menus when you roll over the top level. I have attached a PDF showing the menu structure.

I want to use a list, something like this:

<nav>
	<ul>
		<li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
		<li><a href="#">Item 3</a>
			<ul>
				<li><a href="#">Sub 3.1</a>
                	<ul>
						<li><a href="#">Sub 3.1.1</a></li>
					</ul>
                <li><a href="#">Sub 3.2</a>
                	<ul>
						<li><a href="#">Sub 3.2.1</a></li>
					</ul>

CSS Drop Down in IE

Hey guys im having a really big problem with my site. It shows up fine in every browser except the old version of any IE. Can you guys help me out.

Here's what the page looks like in IE:
problem.jpg

Here's the HTML code:

<tr>
<td>
 
<div id="wrapper">
<div id="navMenu">
 
 
  <ul>
 
     <li><a href="home.html">Home</a>
       <ul>
 
       </ul> <!-- end inner UL -->
 
 
  </li> 
     <!-- end main LI -->
 
  </ul> <!-- end main UL -->
 
    <ul>

Syndicate content