Html CSS菜单的第三级没有'；不能正确显示

我正在做三级菜单。它适用于两个级别，但是当我添加第三个级别并将鼠标悬停在级别1上时，它会显示级别2和级别3。当2级上的lis悬停在上方时，如何使其仅显示第三级

我的html：

<div id="menuContainer">
<div id="menuwrapper">
    <ul>
        <li><a href="#">One 1</a>
            <ul>
                <li><a href="#">Two 1</a></li>
                <li><a href="#">Two 2</a></li>
            </ul>
        </li>
        <li><a href="#">One 2</a>
            <ul>
                <li><a href="#">Two 3</a></li>
                <li><a href="#">Two 4</a></li>
            </ul>
        </li>
        <li><a href="admin.php">One 3</a>
            <ul>                    
                <li>
                    <a href="#">Two 5</font></a>
                    <ul>
                        <li><a href="#"><font size="2">Three 1</font></a></li>
                        <li><a href="#"><font size="2">Three 2</font></a></li>                          

                    </ul>
                </li>
                <li>
                    <a href="#"><font size="2">Two 6</font></a>
                    <ul > 
                        <li><a href="#"><font size="2">Three 3</font></a></li>
                        <li><a href="#"><font size="2">Three 4</font></a></li> 
                    </ul>
                </li>
            </ul>
        </li>
    </ul>       
</div>
</div>

我想你想要这个：

我在最后添加了两行CSS，使用父选择器：

#menuwrapper > ul > li:hover > ul { display: block; left: 0; }
#menuwrapper > ul > li:hover > ul ul { display: none; }

我想你想要这个：

我在最后添加了两行CSS，使用父选择器：

#menuwrapper > ul > li:hover > ul { display: block; left: 0; }
#menuwrapper > ul > li:hover > ul ul { display: none; }

请将#menuwrapper ul li:hover ul更改为#menuwrapper ul li:hover>ul，这样它将只影响其直接子级。请将#menuwrapper ul li:hover ul更改为#menuwrapper ul li:hover>ul，这样它将只影响其直接子级。