如何在CSS / HTML菜单中添加另一个子子菜单？我的错误在哪里

Question

这是我正在使用的CSS。我想在博客中使用子菜单，子子菜单和子子菜单中的菜单。这就是它没有破坏格式。

.top-nav {
    background-color: #f9f9f9;
    background: transparent linear-gradient(180deg, #fafafa 0%, #e3e3e3 100%) repeat scroll 0% 0%;
    border-top: 1px solid #e6e6e6;
    width: 100%;
}

    .top-nav .Pagemenu {
    }

.Pagemenu {
    display: block;
}

    .Pagemenu li {
        display: inline-block;
        position: relative;
        z-index: 10;
        margin: 0;
    }

        .Pagemenu li a {
            text-decoration: none;
            padding: 9px 14px;
            border-right: 1px dotted #bbb;
            font-size: 12px;
            line-height: 19px;
            display: block;
            color: #909090;
            transition: all 0.2s ease-in-out 0s;
        }

            .Pagemenu li a:hover, .Pagemenu li:hover > a {
                background: #eee;
            }

.main-nav {
    background-color: #0FBE7C;
    background: transparent linear-gradient(180deg, #0FBE7C 0%, #0C9863 100%) repeat scroll 0 0;
    display: block;
    width: 100%;
}

.menu {
    display: block;
}

    .menu li {
        display: inline-block;
        position: relative;
        z-index: 10;
    }

        .menu li:first-child {
            margin-left: 0;
        }

        .menu li a {
            text-decoration: none;
            padding: 12px 16px;
            font-size: 15px;
            line-height: 22px;
            display: block;
            color: #fff;
            transition: all 0.2s ease-in-out 0s;
        }

            .menu li a:hover, .menu li:hover > a {
                color: #fff;
                background: #0C9863;
            }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        margin: 0;
        padding: 0;
        width: 150px;
        position: absolute;
        left: 0px;
        background: #fff;
        z-index: 9;
        transform: translate(0,20px);
        transition: all 0.2s ease-out;
    }

        .menu ul:after {
            bottom: 100%;
            left: 20%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(255, 255, 255, 0);
            border-bottom-color: #fff;
            border-width: 6px;
            margin-left: -6px;
        }

        .menu ul li {
            display: block;
            float: none;
            background: none;
            margin: 0;
            padding: 0;
        }

            .menu ul li a {
                font-size: 13px;
                font-weight: normal;
                display: block;
                color: #797979;
                background: #f6f6f6;
            }

                .menu ul li a:hover, .menu ul li:hover > a {
                    background: #27C489;
                    color: #fff;
                }

    .menu li:hover > ul {
        visibility: visible;
        opacity: 1;
        transform: translate(0,0);
    }

    .menu ul ul {
        left: 149px;
        top: 0px;
        visibility: hidden;
        opacity: 0;
        transform: translate(20px,20px);
        transition: all 0.2s ease-out;
    }

        .menu ul ul:after {
            left: -6px;
            top: 10%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(255, 255, 255, 0);
            border-right-color: #fff;
            border-width: 6px;
            margin-top: -6px;
        }

    .menu li > ul ul:hover {
        visibility: visible;
        opacity: 1;
        transform: translate(0,0);
    }

这是我正在犯的错误 - 当我在HTML中添加子子菜单时，我无法在我的网页中看到它，因为它不显示“所有孩子”。所以可以以某种方式添加几行到HTML，但我无法弄清楚它的CSS部分。请帮助。

<nav>
    <ul class='menu'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

        <!-- Customize Navigation Menu Here -->

        <li><a href='#' itemprop='url'><span itemprop='name'>Enterprise</span></a></li>

        <li><a href='#' itemprop='url'><span itemprop='name'>Europe</span></a></li>

        <li>
            <a class='with-ul' href='#' itemprop='url'><span itemprop='name'>IIOIOIOIO</span></a>
            <ul class='sub-menu'>
                <li><a href='URL GOES HERE'>HHHHHH</a></li>
                <li>
                    <a href='#'>GGGGG</a>
                    <ul class='sub-menu'>
                        <li><a href='#'>Sub Sub-Menu 1</a></li>
                        <ul class='sub-menu'>
                            <li><a href='#'>Sub Sub-Menu 1</a></li>
                            <li><a href='#'>Sub Sub-Menu 2</a></li>
                            <li><a href='#'>Sub Sub-Menu 3</a></li>
                            <li><a href='#'>Sub Sub-Menu 4</a></li>
                        </ul>
                        <li><a href='#'>Sub Sub-Menu 2</a></li>
                        <li><a href='#'>Sub Sub-Menu 3</a></li>
                        <li><a href='#'>Sub Sub-Menu 4</a></li>
                    </ul>
                </li>
                <li>
                    <a href='#'>Sub-Menu 3</a>
                    <ul>
                        <li><a href='#'>Sub Sub-Menu 1</a></li>
                        <li><a href='#'>Sub Sub-Menu 2</a></li>
                        <li><a href='#'>Sub Sub-Menu 3</a></li>
                        <li><a href='#'>Sub Sub-Menu 4</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href='#' itemprop='url'><span itemprop='name'>Gaming</span></a></li>

        <li>
            <a class='with-ul' href='#' itemprop='url'><span itemprop='name'>Greentech</span></a>
            <ul class='sub-menu'>
                <li><a href='#'>Sub-Menu 1</a></li>
                <li>
                    <a href='#'>Sub-Menu 2</a>
                    <ul>
                        <li><a href='#'>Sub Sub-Menu 1</a></li>
                        <li><a href='#'>Sub Sub-Menu 2</a></li>
                        <li><a href='#'>Sub Sub-Menu 3</a></li>
                        <li><a href='#'>Sub Sub-Menu 4</a></li>
                    </ul>
                </li>
                <li>
                    <a href='#'>Sub-Menu 3</a>
                    <ul>
                        <li><a href='#'>Sub Sub-Menu 1</a></li>
                        <li><a href='#'>Sub Sub-Menu 2</a></li>
                        <li><a href='#'>Sub Sub-Menu 3</a></li>
                        <li><a href='#'>Sub Sub-Menu 4</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href='#' itemprop='url'><span itemprop='name'>Venture</span></a></li>

        <li>
            <a href='http://www.bloggertheme9.com/2015/09/glorious-responsive-blogger-template.html' target='_blank' title='Grab Here'>
                <i class='fa fa-download' style='font-size:16px' />
            </a>
        </li>

    </ul>

</nav>
<div class='clear' />

Answer 1

我已经使用了你的例子，只是添加了颜色，使它看起来有效，而且它们就在那里。通过访问Greentech进行测试 - ＆gt;子菜单2 - ＆gt;子子菜单2.

添加子菜单，只需在关闭父 li 标记之前添加 ul

body{
  background-color:black;
}

li{
  background-color:red;
}
.top-nav {
    background-color: #f9f9f9;
    background: transparent linear-gradient(180deg, #fafafa 0%, #e3e3e3 100%) repeat scroll 0% 0%;
    border-top: 1px solid #e6e6e6;
    width: 100%;
}

    .top-nav .Pagemenu {
    }

.Pagemenu {
    display: block;
}

    .Pagemenu li {
        display: inline-block;
        position: relative;
        z-index: 10;
        margin: 0;
    }

        .Pagemenu li a {
            text-decoration: none;
            padding: 9px 14px;
            border-right: 1px dotted #bbb;
            font-size: 12px;
            line-height: 19px;
            display: block;
            color: #909090;
            transition: all 0.2s ease-in-out 0s;
        }

            .Pagemenu li a:hover, .Pagemenu li:hover > a {
                background: #eee;
            }

.main-nav {
    background-color: #0FBE7C;
    background: transparent linear-gradient(180deg, #0FBE7C 0%, #0C9863 100%) repeat scroll 0 0;
    display: block;
    width: 100%;
}

.menu {
    display: block;
}

    .menu li {
        display: inline-block;
        position: relative;
        z-index: 10;
    }

        .menu li:first-child {
            margin-left: 0;
        }

        .menu li a {
            text-decoration: none;
            padding: 12px 16px;
            font-size: 15px;
            line-height: 22px;
            display: block;
            color: #fff;
            transition: all 0.2s ease-in-out 0s;
        }

            .menu li a:hover, .menu li:hover > a {
                color: #fff;
                background: #0C9863;
            }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        margin: 0;
        padding: 0;
        width: 150px;
        position: absolute;
        left: 0px;
        background: #fff;
        z-index: 9;
        transform: translate(0,20px);
        transition: all 0.2s ease-out;
    }

        .menu ul:after {
            bottom: 100%;
            left: 20%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(255, 255, 255, 0);
            border-bottom-color: #fff;
            border-width: 6px;
            margin-left: -6px;
        }

        .menu ul li {
            display: block;
            float: none;
            background: none;
            margin: 0;
            padding: 0;
        }

            .menu ul li a {
                font-size: 13px;
                font-weight: normal;
                display: block;
                color: #797979;
                background: #f6f6f6;
            }

                .menu ul li a:hover, .menu ul li:hover > a {
                    background: #27C489;
                    color: #fff;
                }

    .menu li:hover > ul {
        visibility: visible;
        opacity: 1;
        transform: translate(0,0);
    }

    .menu ul ul {
        left: 149px;
        top: 0px;
        visibility: hidden;
        opacity: 0;
        transform: translate(20px,20px);
        transition: all 0.2s ease-out;
    }

        .menu ul ul:after {
            left: -6px;
            top: 10%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(255, 255, 255, 0);
            border-right-color: #fff;
            border-width: 6px;
            margin-top: -6px;
        }

    .menu li > ul ul:hover {
        visibility: visible;
        opacity: 1;
        transform: translate(0,0);
    }

<nav>
    <ul class='menu'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

        <!-- Customize Navigation Menu Here -->

        <li><a href='#' itemprop='url'><span itemprop='name'>Enterprise</span></a></li>

        <li><a href='#' itemprop='url'><span itemprop='name'>Europe</span></a></li>

        <li>
            <a class='with-ul' href='#' itemprop='url'><span itemprop='name'>IIOIOIOIO</span></a>
            <ul class='sub-menu'>
                <li><a href='URL GOES HERE'>HHHHHH</a></li>
                <li>
                    <a href='#'>GGGGG</a>
                    <ul class='sub-menu'>
                        <li><a href='#'>Sub Sub-Menu 1</a></li>
                        <ul class='sub-menu'>
                            <li><a href='#'>Sub Sub-Menu 1</a></li>
                              <ul class='sub-menu'>
                                <li><a href='#'>Sub Sub-Menu 1</a></li>
                              </ul>
                            <li><a href='#'>Sub Sub-Menu 2</a></li>
                            <li><a href='#'>Sub Sub-Menu 3</a></li>
                            <li><a href='#'>Sub Sub-Menu 4</a></li>
                        </ul>
                        <li><a href='#'>Sub Sub-Menu 2</a></li>
                        <li><a href='#'>Sub Sub-Menu 3</a></li>
                        <li><a href='#'>Sub Sub-Menu 4</a></li>
                    </ul>
                </li>
                <li>
                    <a href='#'>Sub-Menu 3</a>
                    <ul>
                        <li><a href='#'>Sub Sub-Menu 1</a></li>
                        <li><a href='#'>Sub Sub-Menu 2</a></li>
                        <li><a href='#'>Sub Sub-Menu 3</a></li>
                        <li><a href='#'>Sub Sub-Menu 4</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href='#' itemprop='url'><span itemprop='name'>Gaming</span></a></li>

        <li>
            <a class='with-ul' href='#' itemprop='url'><span itemprop='name'>Greentech</span></a>
            <ul class='sub-menu'>
                <li><a href='#'>Sub-Menu 1</a></li>
                <li>
                    <a href='#'>Sub-Menu 2</a>
                    <ul>
                        <li><a href='#'>Sub Sub-Menu 1</a></li>
                        <li>
                        <a href='#'>Sub Sub-Menu 2</a>
                    <ul>
                        <li><a href='#'>Sub Sub-Menu 1</a></li>
                        <li><a href='#'>Sub Sub-Menu 2</a></li>
                        <li><a href='#'>Sub Sub-Menu 3</a></li>
                        <li><a href='#'>Sub Sub-Menu 4</a></li>
                    </ul>
                        <li><a href='#'>Sub Sub-Menu 3</a></li>
                        <li><a href='#'>Sub Sub-Menu 4</a></li>
                    </ul>
                </li>
                <li>
                    <a href='#'>Sub-Menu 3</a>
                    <ul>
                        <li><a href='#'>Sub Sub-Menu 1</a></li>
                        <li><a href='#'>Sub Sub-Menu 2</a></li>
                        <li><a href='#'>Sub Sub-Menu 3</a></li>
                        <li><a href='#'>Sub Sub-Menu 4</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href='#' itemprop='url'><span itemprop='name'>Venture</span></a></li>

        <li>
            <a href='http://www.bloggertheme9.com/2015/09/glorious-responsive-blogger-template.html' target='_blank' title='Grab Here'>
                <i class='fa fa-download' style='font-size:16px' />
            </a>
        </li>

    </ul>

</nav>
<div class='clear' />