我需要一个下拉菜单,只显示在悬停。从下拉菜单列表,我需要一个进一步的列表悬停在一个子项目。
关键字/parent是Subjects。悬停时(在单词Subjects上),它必须显示:
数学
英语
西班牙
历史
科学
额外
是
在子Extra上悬停时,它必须显示另外3个项目:
艺术
体育
我已经尝试了下拉菜单和下拉菜单,但是子菜单项(即艺术,体育和社区)即使我悬停在父主题上也会显示。
我的CSS挑战,尽我所能从下拉脚本下载到网上。但似乎没有人能解决这个问题。
下面是菜单的HTML。我不确定我做得对不对。
<nav id="subjectsNav">
<ul>
<li class="last"><a href="#" title="SUBJECTS">SUBJECTS</a>
<ul>
<li><a href="#" title="Maths">Maths</a>
</li>
<li><a href="#" title="English">English</a>
</li>
<li><a href="#" title="Spanish">Spanidsh</a>
</li>
<li><a href="#" title="History">History</a>
</li>
<li><a href="#" title="Science">Science</a>
</li>
<li><a href="#" title="EXTRA">EXTRA</a>
</li>
<ul id="extraNav">
<li><a href="#" title="Arts">Arts</a>
</li>
<li><a href="#" title="Sports">Sports</a>
</li>
<li><a href="#" title="Community">Community</a>
</li>
</ul>
<li><a href="#" title="Marks">Marks</a>
</li>
</ul>
</li>
</ul>
</nav>
需要帮助的HTML和CSS的上述。非常感谢您的回答。非常感谢您的宝贵时间。
extraNav子菜单必须位于父列表项内:
<ul id="subjectsNav">
<li><a href="#" title="SUBJECTS">SUBJECTS</a>
<ul>
<li><a href="#" title="Maths">Maths</a>
</li>
<li><a href="#" title="English">English</a>
</li>
<li><a href="#" title="Spanish">Spanidsh</a>
</li>
<li><a href="#" title="History">History</a>
</li>
<li><a href="#" title="Science">Science</a>
</li>
<li><a href="#" title="EXTRA">EXTRA</a>
<ul>
<li><a href="#" title="Arts">Arts</a>
</li>
<li><a href="#" title="Sports">Sports</a>
</li>
<li><a href="#" title="Community">Community</a>
</li>
</ul>
</li>
<li><a href="#" title="Marks">Marks</a>
</li>
</ul>
</li>
</ul>
CSS: /* Main */
#subjectsNav {
list-style: none;
}
#subjectsNav li {
width: 70px;
display: block;
float: left;
position: relative;
}
#subjectsNav li:hover > ul {
display: block;
}
/* Sub-menu */
#subjectsNav ul {
list-style: none;
left: 0;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 99999;
}
#subjectsNav ul li {
float: none;
display: block;
}
#subjectsNav ul ul {
top: 0;
left: 70px;
}
演示:http://jsfiddle.net/Bc2sv/