【CSS】纯CSS实现三级导航(模板)_html/css_WEB-ITnose
程序员文章站
2023-12-23 19:13:09
...
以前觉得级联导航实现应该很简单,就是使用css的hover属性来实现就可以了,于是也没有过多地留意实践。可是在最近的面试当中,当被问到这个问题的时候才明白,很多东西不能想当然地以为这样做就可以了,不单只是知道大概的思路就认为OK了,更需要实际的动手能力。
后来就实际操作了级联菜单的实现,借此机会把它弄成一个模板来和大家一起学习。
以下是HTML部分:
纯css级联导航
CSS部分:
body,div,ul,li,a{margin: 0;padding: 0;text-decoration: none;} /* 一级导航 */ .one-nav li{list-style-type: none;float: left;width: 16.57%;text-align: center;background-color: #3391E6;border-right: 1px solid white;cursor: pointer;height: 30px;line-height: 30px;} .one-nav li:nth-last-child(1){border-right: none;} .one-nav li a{color: white;} .one-nav li:hover .two-nav{display: block;} .one-nav li:hover{background-color: #4260D7;} /* 二级导航 */ .two-nav {display: none;} .two-nav li{width: 100%;} .two-nav li:hover .three-nav{display: block;position: relative;} /* 三级导航 */ .three-nav{position: absolute;width:100%;left: 100%;bottom: 100%;} /* 最右边的三级导航显示在左边 */ .one-nav li:nth-last-child(1) .two-nav li .three-nav li{width: 100%;position:relative;right: 200%;}
效果图如下:
例子比较简单,但往往越简单的东西越需要脚踏实地地去实践和经历,人生已如此,共勉。
Author:致知
Sign:路漫漫其修远兮,吾将上下而求索。
推荐阅读
-
【CSS】纯CSS实现三级导航(模板)_html/css_WEB-ITnose
-
CSS3 实现的一个简单的"动态主菜单" 示例[转]_html/css_WEB-ITnose
-
DIV+CSS实现圆角_html/css_WEB-ITnose
-
JSP网页实现拼音和汉字的上下对齐_html/css_WEB-ITnose
-
html5 css3 jquery js 实现全屏_html/css_WEB-ITnose
-
css border实现的三角形图案_html/css_WEB-ITnose
-
js css 实现简易计算器_html/css_WEB-ITnose
-
使用box-shadow属性实现圆角效果代码实例_html/css_WEB-ITnose
-
求教,有这么一个效果,当把鼠标放上去二维码慢慢的出来,鼠标离开二维码慢慢的下去,怎么去实现。_html/css_WEB-ITnose
-
CSS实现pre标签中内容换行方法_html/css_WEB-ITnose