CSS/HTML Menu going crazy - html

Question

Hello Mates,
I'm trying to build a CSS menu that is displayed above. So far I wrote this HTML:
<div class="left-menu">
<ul class="menu-left">
<li id="current" class="parent active item5">
<span>ღვინო</span>
<ul>
<li class="parent item6">
<span>TELIANI VALLEY</span>
<ul>
<li class="item7">
<span>ლეგენდა</span>
</li>
<li class="item8">
<span>ღვინოები</span>
</li>
<li class="item9">
<span>ჯილდოები</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
and this is my CSS:
/* 1 */
.left-menu ul {
width: 145px;
margin: 0;
padding: 0;
list-style: none;
}
.left-menu ul li {
list-style: none;
margin: 0;
padding: 0;
}
.left-menu ul li {
width: 145px;
margin: 0;
padding: 0;
height: 20px;
background:#fff;
}
.left-menu ul li a {
width:131px;
height:20px;
padding-left: 14px;
float: left;
font: normal 12px calibri, sylfaen, georgia, arial, verdana;
color: #7b2029; text-decoration: none;
}
.left-menu ul li:hover, .left-menu ul li#current {
width: 145px;
height: 20px;
color:#fff;
text-decoration: none;
}
.left-menu ul li#current a {
width: 131px;
height: 20px;
padding-left: 14px;
color: #fff;
text-decoration: none;
background: #7b2029;
display:block;
}
/* 2 */
.left-menu ul li ul {
width:145px;
padding:0;
margin: 2px 0 0 0;
float: left;
list-style: none;
}
.left-menu ul li ul li {
width: 137px;
margin: 0;
padding: 0;
height: 20px;
list-style: none;
padding-left: 8px;
}
.left-menu ul li ul li a {
width: 120px;
height: 20px;
padding-top: 0px;
font: normal 12px/20px calibri, sylfaen, georgia, arial, verdana;
background:#887b33;
}
/* 3 */
and I'm getting displayed this crap:
Can someone tell me why? I haven't experience such thing before...

Answer 1

Link to example fiddle I have created:
Fiddle...
I didn't bother with hover effects, and colors/font styles. You can always change it...
Tested on mozilla and IE (ain't got chrome at work).
I hope it helps.
Daniel