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

本文为大家分享了一个侧边导航栏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-right1px solid #f0f2f1;        width180px;        floatleft;        padding-left35px;    }       .sidebar>ul {        list-stylenone;        padding: 0;        margin: 0;    }       .sidebar>ul>li {        font-size18px;        font-weight: 400;        padding0010px;        margin-top5px;    }       .sidebar>ul>li>ul {        border-top1px dashed rgba(0,0,0,0.1);        displayblock;        list-stylenone;        margin5px010px0;        padding10px0010px;        font-size14px;        max-height138px;        overflowauto;    }       .sidebar a {        line-height: 1.5;    }       .sidebar a:hover {        color#e74430;        cursor:pointer;    }       .sidebar-selected {         color#e74430;    }   

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

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