CSS / HTML菜单变得疯狂

Question

Hello Mates， 我正在尝试构建一个上面显示的CSS菜单。到目前为止，我写了这个HTML：

<div class="left-menu">
<ul class="menu-left">
    <li id="current" class="parent active item5">
        <a href="/teliani/index.php?option=com_telianiwines&amp;view=winesubcategory&amp;Itemid=5"><span>ღვინო</span></a>
            <ul>
            <li class="parent item6">
                <a href="/teliani/index.php?option=com_telianiwines&amp;view=winesubcategory&amp;Itemid=6"><span>TELIANI VALLEY</span></a>
                    <ul>
                        <li class="item7">
                            <a href="javascript:;"><span>ლეგენდა</span></a>
                        </li>
                        <li class="item8">
                            <a href="javascript:;"><span>ღვინოები</span></a>
                        </li>
                        <li class="item9">
                            <a href="javascript:;"><span>ჯილდოები</span></a>
                        </li>
                    </ul>
                </li>
            </ul>
    </li>
</ul>
</div>

这是我的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 */

我正在显示这个废话：

有人可以告诉我为什么吗？我以前没有经历过这样的事情......

Answer 1

链接到我创建的示例小提琴：

Fiddle...

我没有打扰悬停效果和颜色/字体样式。你总是可以改变它...... 在mozilla和IE上测试（在工作时没有镀铬）。 我希望它有所帮助。

丹尼尔