CSS hover menu

      <ul class="menu">
        <li>
        <a href="http://grelek.wz.cz/nova-verze/index.php">Úvodní strana</a>
        </li>
        <li>
        <a href="http://grelek.wz.cz/nova-verze/moje-tvorba.php">Moje tvorba &rarr;</a>
        <ul>
          <li>
          <a href="http://grelek.wz.cz/nova-verze/moje-tvorba/weby/index.php">Weby na kterých jsem pracoval</a>
          </li>
          <li>
          <a href="http://grelek.wz.cz/nova-verze/moje-tvorba/programy-skripty/index.php">Programy, skripty</a>
          </li>
        </ul>
        </li>
        <li>
        <a href="http://grelek.wz.cz/nova-verze/navstevni-kniha/index.php">Návštěvní kniha</a>
        </li>
      </ul>

/*Menu*/
.menu {
font-family: Sylfaen, Times New Roman, serif;
margin: 0px 0px 0px -20px;
list-style-type: none /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding: 0;
margin: 0;
list-style-type: none;
width: 149px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position: relative;
background: #FFFFFF;
height: 26px;
}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display: block; 
text-decoration: none;
height: 25px;
line-height: 25px;
width: 149px;
color: #000000;
text-indent: 5px;
border: 1px solid #FFFFFF;
border-width: 0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background:#d4d8bd; width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color: #FFFFFF; background:#949e7c;}

.menu :hover > a {
color: #FFFFFF; 
background: #000000;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: 150px; 
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility: visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility: hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility: hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility: visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility: visible;
}