我最近使用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ö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ä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ö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ädagogische Tage und Vorträge</li></a>
</ul></li>
<li><a href="#"><span></span>Über uns</a>
<ul>
<li><a href="#"><span></span>Unsere Idee von Schule</li></a>
<li><a href="#"><span></span>Leitbild und Qualität</li></a>
<li><a href="#"><span></span>Schulleitung und Kollegium</li></a>
<li><a href="#"><span></span>Qualitätsentwicklung</li></a>
<li><a href="#"><span></span>Aufnahme am E.I.</li></a>
<li><a href="#"><span></span>Elternbeiträge</li></a>
<li><a href="#"><span></span>Mitwirkung der Eltern</li></a>
<li><a href="#"><span></span>Mitwirkung der Schü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ü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);
}
非常感谢所有帮助!
答案 0 :(得分:0)
你应该修复你的HTML代码。 </li></a>
中的问题必须修复为</a></li>
<li><a href="#"><span></span>Termine</li></a>
TO
<li><a href="#"><span></span>Termine</a></li>
之后修复了level2菜单和level3菜单位置的一些css样式。 see demo in jsfiddle
我改变了菜单leve2的位置:
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
时隐藏菜单级别3nav ul li:hover ul ul {
display:none;
}
但在悬停菜单level2时显示:
nav ul li ul li:hover ul{
display:block;
}