html - CSS/HTML 菜单变得疯狂

Question

大家好， 我正在尝试构建上面显示的 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 :

Fiddle...

我没有为悬停效果和颜色/字体样式而烦恼。你可以随时改变它... 在 mozilla 和 IE 上测试(没有 chrome 在工作)。 希望对您有所帮助。

丹尼尔