<ul> <li><a href="##">首页</a></li> <li> <a href="##" data-toggle="dropdown">教程<span></span></a> <ul> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> </li> <li><a href="##">关于我们</a></li> </ul>
效果图:
通过浏览器调试工具，不难发现，点击有二级导航的菜单项，会自动添加“open”类名，再次点击就会删除添加的“open”类名和那个下拉菜单的实现原理是一样的!
那么在二级导航中使用分割线,只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以了。
面包屑式导航
面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
<ol> <li><a href="#">首页</a></li> <li><a href="#">我的书</a></li> <li>《图解CSS3》</li> </ol>
效果图:
您可能感兴趣的文章: