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

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

效果图：

html：

1. <div class="sidebar">  
2.     <ul>  
3.         <li>优先级   
4.              <ul>  
5.                 <li><aonclickaonclick=""class="sidebar-selected">全部</a></li>  
6.                 <li><aonclickaonclick="">P1</a></li>  
7.                 <li><aonclickaonclick="">P2</a></li>  
8.                 <li><aonclickaonclick=“" >P3</a></li>  
9.                 <li><aonclickaonclick="">P4</a></li>  
10.             </ul>  
11.         </li>  
12.     </ul>  
13. </div>  
14.   

css：

1. .sidebar {   
2.     border-right: 1px solid #f0f2f1;   
3.     width: 180px;   
4.     float: left;   
5.     padding-left: 35px;   
6. }   
7.   
8. .sidebar>ul {   
9.     list-style: none;   
10.     padding: 0;   
11.     margin: 0;   
12. }   
13.   
14. .sidebar>ul>li {   
15.     font-size: 18px;   
16.     font-weight: 400;   
17.     padding: 0010px;   
18.     margin-top: 5px;   
19. }   
20.   
21. .sidebar>ul>li>ul {   
22.     border-top: 1px dashed rgba(0,0,0,0.1);   
23.     display: block;   
24.     list-style: none;   
25.     margin: 5px010px0;   
26.     padding: 10px0010px;   
27.     font-size: 14px;   
28.     max-height: 138px;   
29.     overflow: auto;   
30. }   
31.   
32. .sidebar a {   
33.     line-height: 1.5;   
34. }   
35.   
36. .sidebar a:hover {   
37.     color: #e74430;   
38.     cursor:pointer;   
39. }   
40.   
41. .sidebar-selected {   
42.      color: #e74430;   
43. }   

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