title: display:none; and display:block; in a naviation menu
body: <p>I'm trying to understand a bit more of some CSS coding. I've borrowed a navigation bar. The HTML code is like this:</p>
  
  <pre><code>      &lt;ul&gt;
          &lt;li&gt;
          &lt;a href=""&gt;Business&lt;/a&gt;
              &lt;ul&gt; 
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;sub menu item 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>   ul li 
     {
     display: block;
     position: relative;
     float: left;
     font-size:12px;
     top:15px;
     }
  
     li ul { display: none; }
  
     #navigation ul
     {margin:0px; padding:0px;}
  
  
     ul li a 
     {
     display:block;
     text-decoration: none;
     color: white;
     padding: 20px 30px 20px 15px;
     }
  
     ul li a:hover 
     { 
     background: #F89623;
     }
  
     /*submenu position*/
     li:hover ul 
     {
     display:block;
     position:absolute;
     left: -30px;
     top:51px;
     }
  
     li:hover a 
     { 
     background: #F89623;
     }
  
     /*Background when you mouseover subitems*/
     li:hover li a:hover 
     { 
     background: #FFDEB0;
     }
  
     /*top nav only*/
    #navigation &gt; ul &gt; li &gt; a {
    font-size: 16px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    }
  </code></pre>
  
  <p>I don't understand some of the display tags. What does <code>li ul { display: none; }</code> do?</p>
  
  <p>Also <code>display: block;</code> what does this do in my code (above)?</p>