Css 设置三级无序列表的样式

我有一个3级的、无序的列表，我正在设计一个下拉菜单，以扩展2级的简单下拉菜单。CSS如下所示：

@CHARSET "ISO-8859-1";
/* menu styles */

/* Top-level (Styles Works) */
#jsddm
{   margin: 0;
    padding: 0}

    #jsddm li
    {   float: left;
        list-style: none;
        font: 12px Tahoma, Arial;}

    #jsddm li a
    {   display: block;
        /*background: #324143; Old Style*/
        background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */;
        padding: 5px 12px;
        text-decoration: none;
        border-right: 1px solid white;
        width: 70px;
        /*color: #EAFFED; Default color*/
        color: #000099;
        white-space: nowrap;}


    #jsddm li a:hover
    {   background: #24313C}

        /* 2nd-level (Styles Works) */
        #jsddm li ul
        {   margin: 0;
            padding: 0;
            position: absolute;
            visibility: visible;
            border-top: 1px solid white}

            #jsddm li ul li
            {   float: none;
                display: inline}

            #jsddm li ul li a
            {   width: auto;
                background: #dfeffc;
                color: #24313C}

            #jsddm li ul li a:hover
            {   background: #5c9ccc}

                /* 3rd-level (Doesn't apply styles) */
                #jsddm li ul li ul
                {   margin: 0;
                    padding: 0;
                    position: absolute;
                    visibility: hidden;
                    border-top: 2px solid green}

    <div id="dropDownDiv">
        <ul id="jsddm">
            <li><a class="btn" href="#">Top Item 1</a>
                <ul>
                    <li><a id="" class="btn" href="#">2nd Level Item 1</a></li>
                    <li><a href="#">2nd Level Item 2</a></li>
                </ul>
            </li>
            <li><a class="btn" href="#">Top Item 2</a>
                <ul>
                    <li><a id="" class="btn hide" href="#">2nd Level Item 1</a></li>
                        <ul>
                            <li><a id="" class="btn hide" href="#">3rd Level Item 1</a></li>
                            <li><a id="" class="btn" href="#">3rd Level Item 1</a></li>
                        </ul>
                    <li><a id="" class="btn" href="#">2nd Level Item 1</a></li>
                </ul>
            </li>
        </ul>
    </div>

样式设计适用于前两个级别，但不适用于第三个级别，我不确定语法是否正确，或者是否缺少其他内容。html格式如下：

@CHARSET "ISO-8859-1";
/* menu styles */

/* Top-level (Styles Works) */
#jsddm
{   margin: 0;
    padding: 0}

    #jsddm li
    {   float: left;
        list-style: none;
        font: 12px Tahoma, Arial;}

    #jsddm li a
    {   display: block;
        /*background: #324143; Old Style*/
        background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */;
        padding: 5px 12px;
        text-decoration: none;
        border-right: 1px solid white;
        width: 70px;
        /*color: #EAFFED; Default color*/
        color: #000099;
        white-space: nowrap;}


    #jsddm li a:hover
    {   background: #24313C}

        /* 2nd-level (Styles Works) */
        #jsddm li ul
        {   margin: 0;
            padding: 0;
            position: absolute;
            visibility: visible;
            border-top: 1px solid white}

            #jsddm li ul li
            {   float: none;
                display: inline}

            #jsddm li ul li a
            {   width: auto;
                background: #dfeffc;
                color: #24313C}

            #jsddm li ul li a:hover
            {   background: #5c9ccc}

                /* 3rd-level (Doesn't apply styles) */
                #jsddm li ul li ul
                {   margin: 0;
                    padding: 0;
                    position: absolute;
                    visibility: hidden;
                    border-top: 2px solid green}

    <div id="dropDownDiv">
        <ul id="jsddm">
            <li><a class="btn" href="#">Top Item 1</a>
                <ul>
                    <li><a id="" class="btn" href="#">2nd Level Item 1</a></li>
                    <li><a href="#">2nd Level Item 2</a></li>
                </ul>
            </li>
            <li><a class="btn" href="#">Top Item 2</a>
                <ul>
                    <li><a id="" class="btn hide" href="#">2nd Level Item 1</a></li>
                        <ul>
                            <li><a id="" class="btn hide" href="#">3rd Level Item 1</a></li>
                            <li><a id="" class="btn" href="#">3rd Level Item 1</a></li>
                        </ul>
                    <li><a id="" class="btn" href="#">2nd Level Item 1</a></li>
                </ul>
            </li>
        </ul>
    </div>

如有任何建议，我们将不胜感激

更新：

谢谢你借给我你的眼睛。更正的html：

        <ul id="jsddm">
            <li><a class="btn" href="#">Top Item 1</a>
                <ul>
                    <li><a id="" class="btn" href="#">2nd Level Item 1</a></li>
                    <li><a href="#">2nd Level Item 2</a></li>
                </ul>
            </li>
            <li><a class="btn" href="#">Top Item 2</a>
                <ul>
                    <li><a id="" class="btn hide" href="#">2nd Level Item 1</a>
                        <ul>
                            <li><a id="" class="btn hide" href="#">3rd Level Item 1</a></li>
                            <li><a id="" class="btn" href="#">3rd Level Item 1</a></li>
                        </ul>
                    </li>
                    <li><a id="" class="btn" href="#">2nd Level Item 1</a></li>
                </ul>
            </li>
        </ul>

您的第三级
ul
不包含在
li
中。这可能是你的问题所在。
啊哈，我现在明白了，谢谢加雷斯。我想某处有个标签不见了。