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>

之后修复一些二级菜单和三级菜单位置的CSS样式。 see demo in jsfiddle

我改变菜单level2的位置:

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

并为 3 级菜单添加一些样式

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

悬停菜单级别1时隐藏菜单级别3

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

但悬停菜单level2时显示:

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

see demo in jsfiddle