CSS menu - jak to funguje?

/* CSS kód */
#vodorovne_menu {margin: 0px; padding: 0;}
#vodorovne_menu li {float:left; list-style-type:none;}
#vodorovne_menu li a {display:block; width: 150px; line-height: 24px; text-align: center; color: black; text-decoration: none;}
#vodorovne_menu li a:hover { background-color: yellow; color: black;}
#vodorovne_menu li ul {display: none;}
#vodorovne_menu li:hover ul {display:block; position:absolute; }
#vodorovne_menu li:hover ul li {float: none; width: 150px; border-top: 1px solid #F0F0F0;}
#vodorovne_menu li:hover ul li a {background-color: black; color: white;}
#vodorovne_menu li:hover ul li a:hover {background-color: rgb(227, 142, 51); color:white; font-weight: bold;}



<!--// HTML kód //-->
 
    <ul id="vodorovne_menu">
      <!-- první blok menu -->
      <li><a>Najeď myší</a>
        <ul>
          <li><a href="#">První položka</a></li>
          <li><a href="#">Druhá položka</a></li>
        </ul>
      </li>
      <!-- první blok menu konec-->
      <!-- druhý blok menu -->
      <li><a>Najeď myší</a>
        <ul>
          <li><a href="#">První položka</a></li>
          <li><a href="#">Druhá položka</a></li>
        </ul>
      </li>
      <!-- druhý blok menu konec-->                        
    </ul>