Выпуск выпадающего меню третьего уровня CSS

У меня есть раскрывающееся меню CSS, основанное на http://jsfiddle.net/2RgmH/

В настоящее время у меня есть проблема, когда в пунктах меню 3-го уровня не выровнены с их родителем второго уровня. Блок 3-го уровня начинается на один уровень ниже.

Мой CSS:

* {
     list-style:none;
     margin:0;
     padding:0;
     font-size:1em;
     cursor:pointer;
  }
#menu{
     margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#55aa7f;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#55aa7f;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#55aa7f;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}

HTML это

<li><span>Home</span></li>
<li><span>Test-L1</span>
<ul>
    <li><span>Test-L2A</span></li>
    <li><span>Test-L2B</span>
        <ul>
            <li><span>Test-L3A</span></li>
            <li><span>Test-L3B</span></li>
        </ul>
    </li>
    <li><span>Test-L2C</span>
        <ul>
            <li><span>Test-L3C</span></li>
            <li><span>Test-L3D</span></li>
        </ul>
    </li>
</ul>
</li>

Я нашел вопрос с идентичной проблемой здесь, я попытался реализовать единственный ответ, данный там. Но не мог заставить это работать. Может ли кто-нибудь помочь мне с фактической частью CSS для выравнивания меню 3-го уровня с их родителями. Спасибо

0 ответов

Другие вопросы по тегам