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

效果图：

html：

XML/HTML Code复制内容到剪贴板 <div class="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: 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: 5px010px0;        padding: 10px0010px;        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侧边导航栏实例讲解，希望对大家学习制作导航栏有所帮助。

基于html和CSS3制作简单侧边导航栏