CSS，下拉菜单：li之间的ul子菜单

Question

我正在构建一个三级下拉菜单，我的样式有问题。

我有这样的事情：

有一个li（Corsi）包含一个包含三个li的ul（第一个菜单）。 像这样：

<ul><li>Corsi
    <ul><li>First menu
        <ul><li>Sub menu 1</li>
        <li>Sub menu 2</li>
        <li>Sub menu 3</li></ul>
    </li></ul>
</li></ul>

现在，我想在第二个ul中添加另一个元素，我想让它在子菜单下面。但我不能，因为新的li覆盖了子菜单的第一个元素（参见下面的代码和图片）。

<ul><li>Corsi
    <ul><li>First menu
        <ul><li>Sub menu 1</li>
        <li>Sub menu 2</li>
        <li>Sub menu 3</li></ul>
    </li>
    <li>New li</li></ul>
</li></ul>

这是CSS代码：

ul {
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
    width: 100%;
}

ul a {
    display:block;
    width: 100%;
}

ul li {
    position:relative;
    float:left;
    width: 19%;
    height: 100%;
    margin-top: 17px;
    padding: 20px 0 6%;
}

ul ul {
    position: absolute;
    list-style: none;
    float: left;
    top: 100%;
    padding: 0;
}

ul ul li {
    float: left;
    width: 100%;
    padding: 0;
}

ul ul a {
    padding: 20px 47px;
    width: 150px;
    height: auto;
    margin: 0;
}

ul > ul > a {
    width: 100%;
}

ul ul ul {
    top: 100%;
    left: 0;
}

如果让第二个li低于子菜单，我该怎么办？

谢谢大家，对不起，如果我的解释不是最好的。