Czy tak proste menu w CSS nie działa

http://rexx.hekko.pl/menu/

HTML
<ul id="navi" class="dropdown dropdown-horizontal">

<li><a href="#">Aktualności</a>
<ul>
<li><a href="#">Polska</a></li>
<li><a href="#">Świat</a></li>
</ul>
</li>
<li><a href="#">Tutoriale</a>

<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Fotografie</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>

<li><a href="#">Inspiracje</a>
<ul>
<li><a href="#">ikony</a></li>
<li><a href="#">strony</a></li>
</ul>
</li>
</ul>

CSS

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: left;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}




#navi {
font-family: Verdana, Geneva, sans-serif;

}

#navi li a {
display:block;
color:#000;
text-decoration:none;

padding:10px 20px;
}

#navi li a:hover,#navi li a.hover {
background:#00ccff;
}

#navi li ul {

}

#navi li li a {
width:150px;
border:0;

}

#navi li li a:hover {
background:#7b7b7b;
}

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: left;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}