Многоуровневое меню CSS3 для мобильных устройств: второй уровень не отображается

Question

Добрый вечер, как заголовок, я использую вертикальное меню CSS3 для мобильной веб-страницы, хотя меню первого уровня открыто правильно, я не могу сказать то же самое для второго уровня, который всегда отображается при наведении курсораЯ пробовал много вещей, но ничего не получалось.

Я не специалист по CSS3 или HTML, хотя наверняка что-то упустил.

HTML-код:

@media only screen and (max-width : 640px) {

 /* ---------------------------------------------
     Mobile Menu 
    --------------------------------------------- */
    .m-menu {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    .m-menu li { list-style: none; }

    .m-menu li a {
        display: table;
        margin-top: 1px;
        padding: 14px 10px;
        width: 100%;
        background: #78BE20;
        text-decoration: none;
        text-align: left;
        vertical-align: middle;
        color: #fff;
        overflow: hidden;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.4s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.4s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:first-child a { margin-top: 0; }


    .m-menu li a:hover {
        background: #555555;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }

    .m-menu li ul {
        margin: 0;
        padding: 0;
    }

    .m-menu li li a {
        display: block;
        margin-top: 0;
        padding: 0 10px;
        height: 0;
        background: #EEEEEE;
        color: #515151;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:hover li a {
        display: table;
        margin-top: 1px;
        padding: 10px;
        width: 100%;
        height: 1em;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:hover li a:hover {
        background: #E7E7E7;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }
    
    /* Second level  */
   .m-menu > li > li:hover li a {
        display: table;
        margin-top: 1px;
        padding: 10px;
        width: 100%;
        height: 1em;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

}

<ul class="m-menu">
    <li> <a href="#">MENU VOICE</a>
        <ul>
			<li><a href="#">FIRST LEVEL ITEM 1</a></li>
            <li><a href="#">FIRST LEVEL ITEM 2</a></li>
			<li>
                <a href="#">FIRST LEVEL ITEM 3</a>
                <ul>
                    <li><a href="#">SECOND LEVEL ITEM 1</a></li>
                </ul>
            </li>
		</ul>
	</li>
</ul>

С уважением и заранее благодарим за каждую руку помощи.

Крис

Answer 1

Это всего лишь незначительные иерархические ошибки:

.m-menu > li:hover li a предназначается для всех якорей, всех элементов списка (под первым).Задайте первый уровень, в частности, с помощью: .m-menu > li:hover > ul > li > a и .m-menu > li > li:hover li a забывает о родительском элементе ul элемента списка третьего уровня: .m-menu > li > ul > li:hover li a

edit: я также удалил медиа-запрос, чтобы фрагмент отображался нарабочий стол.

 /* ---------------------------------------------
     Mobile Menu 
    --------------------------------------------- */
    .m-menu {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    .m-menu li { list-style: none; }

    .m-menu li a {
        display: table;
        margin-top: 1px;
        padding: 14px 10px;
        width: 100%;
        background: #78BE20;
        text-decoration: none;
        text-align: left;
        vertical-align: middle;
        color: #fff;
        overflow: hidden;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.4s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.4s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:first-child a { margin-top: 0; }


    .m-menu li a:hover {
        background: #555555;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }

    .m-menu li ul {
        margin: 0;
        padding: 0;
    }

    .m-menu li li a {
        display: block;
        margin-top: 0;
        padding: 0 10px;
        height: 0;
        background: #EEEEEE;
        color: #515151;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:hover > ul > li > a {
        display: table;
        margin-top: 1px;
        padding: 10px;
        width: 100%;
        height: 1em;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:hover li a:hover {
        background: #E7E7E7;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }
    
    /* Second level  */
   .m-menu > li > ul > li:hover li a {
        display: table;
        margin-top: 1px;
        padding: 10px;
        width: 100%;
        height: 1em;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

<ul class="m-menu">
    <li> <a href="#">MENU VOICE</a>
        <ul>
			<li><a href="#">FIRST LEVEL ITEM 1</a></li>
            <li><a href="#">FIRST LEVEL ITEM 2</a></li>
			<li>
                <a href="#">FIRST LEVEL ITEM 3</a>
                <ul>
                    <li><a href="#">SECOND LEVEL ITEM 1</a></li>
                </ul>
            </li>
		</ul>
	</li>
</ul>