CSS三级导航菜单是网站中非常常见的一种菜单类型,可以让用户方便地浏览网站的不同内容。下面是一个例子,带有清晰的注释,可以帮助你了解如何编写这样的菜单。html, body { margin: 0;
CSS三级导航菜单是网站中非常常见的一种菜单类型,可以让用户方便地浏览网站的不同内容。下面是一个例子,带有清晰的注释,可以帮助你了解如何编写这样的菜单。
html, body { margin: 0; padding: 0; } nav { background-color: #333; font-size: 0; text-align: center; } nav ul { display: inline-block; list-style: none; margin: 0; padding: 0; position: relative; vertical-align: top; } nav ul li { display: inline-block; margin: 0; padding: 0; } nav ul li:hover { background-color: #555; } nav a { color: #fff; display: block; padding: 10px; text-decoration: none; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #333; } nav ul ul li { display: block; } nav ul ul li a { padding: 10px; } nav ul li:hover > ul { display: inherit; } nav ul ul ul { left: 100%; top: 0; }
基本上,这是一个具有三级嵌套的纯CSS导航。第一级是一个具有水平列表的无序列表,第二级和第三级是垂直列表。在鼠标悬停在顶层列表项上时,会显示下拉菜单。
粉丝
0
关注
0
收藏
0