使用:hover 交互


效果:

  • 项目1
    • 子项目1
    • 子项目2
    • 子项目3
  • 项目2
    • 子项目1
    • 子项目2
    • 子项目3
  • 项目3
    • 子项目1
    • 子项目2
    • 子项目3
  • 项目4
    • 子项目1
    • 子项目2
    • 子项目3
html css
<ul class="show">
	<li>项目1
		<ul>
			<li>子项目1</li>
			<li>子项目2</li>
			<li>子项目3</li>
		</ul>
	</li>
	<li>项目2
		<ul>
			<li>子项目1</li>
			<li>子项目2</li>
			<li>子项目3</li>
		</ul>
	</li>
	<li>项目3
		<ul>
			<li>子项目1</li>
			<li>子项目2</li>
			<li>子项目3</li>
		</ul>
	</li>
	<li>项目4
		<ul>
			<li>子项目1</li>
			<li>子项目2</li>
			<li>子项目3</li>
		</ul>
	</li>
</ul>
						
/* 子项目, 必须也用css定义不显示, 在标签上定义不显示,将无法应:hover效果. */
.show li>ul {
	display: none;
}

.show li:hover>ul {
	display: block;
}