html - 下拉菜单错误？

Question

我最近使用 CSS3 制作了一个垂直下拉菜单。但是我遇到了一个问题：第一个子类别将在悬停时显示，但第二个子类别只应该在您移动到第一个嵌套 ul 时显示。您可以在Mac-Resources中查看以下代码。以下是我的导航结构：

<nav>
<ul>
    <li><a href="#"><span></span>Aktuelles</a>
        <ul>    
            <li><a href="#"><span></span>Termine</li></a>
            <li><a href="#"><span></span>Archiv</li></a>
        </ul></li>
    <li><a href="#"><span></span>Schule in Aktion</a>
        <ul>
            <li><a href="#"><span></span>hEImun</a>
                <ul>    
                    <li><a href="#"><span></span>What is MUN?</li></a>
                    <li><a href="#"><span></span>What is hEImun?</li></a>
                    <li><a href="#"><span></span>Schedule</li></a>
                    <li><a href="#"><span></span>Accomodations</li></a>
                </ul></li>
            <li><a href="#"><span></span>AGs, AGs, AGs</li></a>
            <li><a href="#"><span></span>Begabtenf&ouml;rderung</li></a>
            <li><a href="#"><span></span>Wettbewerbe</li></a>
            <li><a href="#"><span></span>Theater</li></a>
            <li><a href="#"><span></span>Milchbar</li></a>
            <li><a href="#"><span></span>Oberstufe</li></a>
            <li><a href="#"><span></span>Compassion</li></a>
            <li><a href="#"><span></span>BOGY</li></a>
            <li><a href="#"><span></span>Sport</li></a>
            <li><a href="#"><span></span>Unterrichtsprojekte</li></a>
        </ul></li>
    <li><a href="#"><span></span>Unterrichtsangebot</a>
        <ul>    
            <li><a href="#"><span></span>Profile</li></a>
            <li><a href="#"><span></span>Der Bilinguale Zug</li></a>
            <li><a href="#"><span></span>Ganztageszug</li></a>
            <li><a href="#"><span></span>Methodencurriculum</li></a>
            <li><a href="#"><span></span>Interne Regelungen</li></a>
            <li><a href="#"><span></span>Grundschule</li></a>
            <li><a href="#"><span></span>Englisch-Zertifikate</li></a>
        </ul></li>
    <li><a href="#"><span></span>P&auml;dagogik</a>
        <ul>    
            <li><a href="#"><span></span>Bausteine</li></a>
            <li><a href="#"><span></span>Soziales Lernen</li></a>
            <li><a href="#"><span></span>Beratungsm&ouml;glichkeiten am E.I.</li></a>
            <li><a href="#"><span></span>Ganzheitliche Lernberatung</li></a>
            <li><a href="#"><span></span>Compassion</li></a>
            <li><a href="#"><span></span>Suchtprophylaxe</li></a>
            <li><a href="#"><span></span>Anti-Gewaltprojekte</li></a>
            <li><a href="#"><span></span>P&auml;dagogische Tage und Vortr&auml;ge</li></a>
        </ul></li>
    <li><a href="#"><span></span>&Uuml;ber uns</a>
        <ul>    
            <li><a href="#"><span></span>Unsere Idee von Schule</li></a>
            <li><a href="#"><span></span>Leitbild und Qualit&auml;t</li></a>
            <li><a href="#"><span></span>Schulleitung und Kollegium</li></a>
            <li><a href="#"><span></span>Qualit&auml;tsentwicklung</li></a>
            <li><a href="#"><span></span>Aufnahme am E.I.</li></a>
            <li><a href="#"><span></span>Elternbeitr&auml;ge</li></a>
            <li><a href="#"><span></span>Mitwirkung der Eltern</li></a>
            <li><a href="#"><span></span>Mitwirkung der Sch&uuml;ler</li></a>
            <li><a href="#"><span></span>Gremien</li></a>
            <li><a href="#"><span></span>Freundeskreis</li></a>
            <li><a href="#"><span></span>Milchbar</li></a>
            <li><a href="#"><span></span>Geschichte</li></a>
            <li><a href="#"><span></span>Die Schulgr&uuml;nderin</li></a>
        </ul></li>
    <li><a href="#"><span></span>Schulweb</li></a>
    <li><a href="#"><span></span>E.I. unterwegs</li></a>
</ul>

这是 CSS 标记：

nav {
    position: absolute;
}

nav ul {
    list-style-type: none;
    list-style-image: none;
    margin: 0px;
    padding: 0px;
    }

nav ul li {
    position: relative;
}

nav a {
    color: #FFFFFF;
    display: block;
    text-decoration: none;
    transition: background 0.5s;
    -moz-transition: background 0.5s;
    -webkit-transition: background 0.5s;
    font-family: tahoma;
    font-size: 12pt;
    padding: 7px;
    }

nav a:hover {
    background: #fcc74b;
    color:#FFFFFF;
    }

nav ul li:hover ul {
    display:block;
    }

nav ul ul {
    position: absolute;
    left: 210px;
    top:0;
    display: none;
    }

nav ul ul li {
    width: 200px;
    background: #99CC33;
    }

nav ul ul li a {
    color:#FFFFFF;
    font-size:12px;
    text-transform:none;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
    }

nav ul ul li a:hover {
    color: #FFFFFF;
    }

nav span {
    width:12px;
    height:12px;
    background:#fff;
    display:inline-block;
    float:left;
    margin-top:3px;
    margin-right:20px;
    position:relative;
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    }

nav a:hover span {
    background: #003399;
    transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    }

非常感谢所有帮助！

Answer 1

您应该修复您的 html 代码。</li></a>必须解决的问题</a></li>

<li><a href="#"><span></span>Termine</li></a>

到

<li><a href="#"><span></span>Termine</a></li>

之后为level2菜单和level3菜单的位置修复一些css样式。在 jsfiddle 中查看演示

我改变了菜单 2 级的位置：

nav ul ul {
    position: absolute;
    left: 180px;
    top:0;
    display: none;
}

并为菜单 level3 添加一些样式

nav ul ul ul {
    position: absolute;
    left: 200px;
    top:0;
    display: none;
}

悬停菜单 level1 时隐藏菜单 level3

nav ul li:hover ul ul {
    display:none;
}

但在悬停菜单 level2 时显示它：

nav ul li ul li:hover ul{
    display:block;
}

在 jsfiddle 中查看演示