CSS 实现4级的下拉菜单

2024-09-05 12:20:48

字体：大中小

来源：转载

供稿：网友

CSS实现的多级菜单，一共可下拉出4级，在编写此类的CSS菜单时要注意，一级的li，a的hover时，设置二级菜单可见，一级的li，a的hover时，设置二级,三级菜单隐藏，一级和二级的li，a的hover时，设置三级和四级级菜单隐藏，一级二级菜单hover时，设定3级菜单可见，一级二级三级hover时，设置四级菜单可见，代码里已加注了丰富的注释，菜单风格如果不适合你口味的话，可自己美化一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS 实现4级的下拉菜单</title></head><style></style><body><div class="menu"><ul><li>公司首页<ul><li>二级菜单_01</li><li>二级菜单_02</li></ul></li><li>公司简介<ul><li>二级菜单_01</li><li>二级菜单_02</li></ul></li><li>产品导航<ul><li>二级菜单_01<li>二级菜单_02	<ul>	<li>三级菜单_01</li>	<li>三级菜单_02</li>	<li>三级菜单_03</li>	<li>三级菜单_04										<ul>			<li>四级菜单_01</li>			<li>四级菜单_02</li>			<li>四级菜单_03</li>			<li>四级菜单_04</li>			</ul>	</li>	</ul></li><li>二级菜单_03	<ul>	<li>三级菜单_01</li>	<li>三级菜单_02</li>	<li>三级菜单_03</li>	<li>三级菜单_04										<ul>			<li>四级菜单_01</li>			<li>四级菜单_02</li>			<li>四级菜单_03</li>			<li>四级菜单_04</li>			</ul>	</li>	</ul></li></ul></body></html>

上一篇：具有动画效果的侧边折叠菜单

下一篇：JS版无限级网页折叠菜单，类似于树形菜单