我正在尝试制作一个与此 Flash 网站上的菜单类似的菜单:
当我点击“投资组合”时,只有到子导航链接才会显示出来。现在我只设法让一个典型的垂直“悬停菜单上的显示子导航”工作。
需要的是,一旦它点击了适当的菜单项,它的子菜单就会显示出来。当子菜单项悬停在然后被选中时,该子菜单仍然显示。当子菜单项被选中时,内容显示,菜单和子菜单都保持可见(选定的菜单和子菜单项被赋予不同的颜色以显示导航路径)。唷。
这是我的html:
<div id="nav">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">testimonials</a>
<ul>
<li><a href="#">testimonial1</a></li>
<li><a href="#">testimonial2</a></li>
<li><a href="#">testimonial3</a></li>
<li><a href="#">testimonial4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">services1</a></li>
<li><a href="#">services2</a></li>
<li><a href="#">services3</a></li>
<li><a href="#">services4</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end #nav-->
这是我的CSS:
#nav {
width:160px;
position: relative;
top: 250px;
left: 20px;
}
#nav ul {
margin:0px;
padding:0px;
}
#nav ul li {
line-height:24px;
list-style:none;
}
#nav a {
text-decoration: none;
color: #9d9fa2;
}
#nav ul li a:hover {
position:relative;
color: #00aeef;
}
#nav ul ul {
display:none;
position:absolute;
left:160px;
top:4px;
}
#nav ul li:hover ul {
display:block;
color: #00aeef;
}
#nav ul ul li {
width:160px;
float:left;
display:inline;
line-height:16px;
}
.selected {
color: #00aeef !important;
}
我应该给子菜单一个类,以便我可以隐藏然后显示它们吗?该课程将应用于哪里?到 ul? 我可以对两个子菜单使用相同的类吗?我为此目的应用 display:none 值的方式有误吗?
非常感谢这里所有聪明的人。