CSS making breadcrumbs Navigation

Css2 the main principle of making breadcrumb navigation is to use absolute positioning and extrusion properties when the width and height of the element are zero .

650) this.width=650; "src=" Http://images.cnitblog.com/blog/680649/201412/071126059518782.png "style=" margin:0px; padding:0px;border:0px; "/>

650) this.width=650; "src=" Http://images.cnitblog.com/blog/680649/201412/071134010762729.png "style=" margin:0px; padding:0px;border:0px; "/>

Code:

650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>

<ul> <li>HTML<i></i></li> <li><em></em>CSS<i></i> </li> <li><em></em>JavaScript<i></i></li></ul>

650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>

Css:

650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px; Border:none; "/>

    ul{        list-style:none;     }    li{        float:left;         width:200px;        height:32px;         line-height:32px;         background-color:gray;        text-align:center;         font-size:14px;        font-weight :bold;        font-family:arial;         position:relative;        margin-left:5px;         cursor:pointer;    }    em,i{         display:block;        width:0;         height:0;        border-style:solid;         border-width:16px 0 16px 16px;         position:absolute;    }    i{         right:-16px;        top:0;         border-color:transparent transparent transparent  gray;        z-index:2;    }     em{        left:0;         top:0;        border-color:transparent transparent  transparent white;  &nbsP; }    li:hover{        background-color:o Range;        color: #FFF;    }     li:hover i{        border-color:transparent  transparent transparent orange;    }

650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>

done!

650) this.width=650, "src=" http://images.cnitblog.com/blog/437282/201411/041405283617635.gif "width="/>

CSS making breadcrumbs Navigation