制作竖级菜单,道理和横版的是一样的。只不过不需要float属性。需要在ul li ul加上定位。让第二个ul向右偏移整个宽度。如下图显示:
这是之前为一个客户的做的主题,要求是五级导航。
利用display:none;display:block;hover三个CSS属性,其实做出来的已经是无限极了。基本思路如下:
div{position:relative;}
div ul{width:++;height:+;}
div ul li{list:none;}
div ul li ul{display:none}
div ul li:hover ul{display:block;position:absolute;left:这里填第一级ul的宽度++;}
这样做出来已经是无限极导航菜单了,为了当鼠标放在ul li ul上边时候ul li ul li ul不显示再加上一段代码
div ul li ul li ul{display:none;}
div ul li ul li:hover ul{display:block;}
基本思路就是这样,竖版的多级导航菜单已经完成。
写在结尾:以上就是纯CSS为wordpress制作竖版多级菜单的详细内容,更多请关注【杭州SEO博客】其它相关文章!
本文地址:http://seo.youqingshuyuan.com/4077.html
版权声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系我们。
本文地址:http://seo.youqingshuyuan.com/4077.html
版权声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系我们。