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

效果图：

html：

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

css：

CSS Code 复制内容到剪贴板 .sidebar {         border-right :  1px   solid   #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 :  1px   dashed  rgba(0,0,0,0.1);         display :  block ;         list-style :  none ;         margin :  5px 010px 0;         padding :  10px 0010px ;         font-size :  14px ;         max-height :  138px ;         overflow :  auto ;    }       .sidebar a {         line-height : 1.5;    }       .sidebar a:hover {         color :  #e74430 ;         cursor : pointer ;    }       .sidebar-selected {          color :  #e74430 ;    }   

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