本文为大家分享了一个侧边导航栏css示例，供大家参考，具体内容如下

效果图：

html：

XML/HTML Code复制内容到剪贴板 <divclass="sidebar"> <ul> <li>优先级 <ul> <li><aonclickaonclick=""class="sidebar-selected">全部</a></li> <li><aonclickaonclick="">P1</a></li> <li><aonclickaonclick="">P2</a></li> <li><aonclickaonclick=“">P3</a></li> <li><aonclickaonclick="">P4</a></li> </ul> </li> </ul> </div>

css：

CSS Code复制内容到剪贴板 .sidebar{ border-right:1pxsolid#f0f2f1; width:180px; float:left; padding-left:35px; } .sidebar>ul{ list-style:none; padding:0; margin:0; } .sidebar>ul>li{ font-size:18px; font-weight:400; padding:0010px; margin-top:5px; } .sidebar>ul>li>ul{ border-top:1pxdashedrgba(0,0,0,0.1); display:block; list-style:none; margin:5px010px0; padding:10px0010px; font-size:14px; max-height:138px; overflow:auto; } .sidebara{ line-height:1.5; } .sidebara:hover{ color:#e74430; cursor:pointer; } .sidebar-selected{ color:#e74430; }

以上就是css侧边导航栏实例讲解，希望对大家学习制作导航栏有所帮助。