why css break (not taking the height of li)?

I try to make one simple demo using this link
http://www.spiceforms.com/blog/create-breadcrumb-navigation-with-css3/
I am able to make this as understand better
here is demo
http://codepen.io/anon/pen/bdmYBv
But when I integrate it my application it break .Mean display half (in form of cut pieces ) .why ? CSS is not applied in that
Actually my breadcrumb not display as it display in my demo .I think ionic css is conflict my style css can we make this demo with ionic ? how to resolve this issue ?

here is my live application demo url

http://codepen.io/anon/pen/KpGyNGenter image description here

#my-breadcrumbs ul li {
        list-style:none;
    }

    #my-breadcrumbs {
        margin-top: 44px;
        margin-left: 10px;
    }

    #my-breadcrumbs ul li a {
        display: block;
        float: left;
        height: 25px;
        background: grey;
        text-align: center;
        padding: 15px 20px 0 20px;
        position: relative;
        margin: 0 22.5px 0 0;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #fff;
    }


    #my-breadcrumbs ul li a:after {
        content: "";
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid grey;
        position: absolute; right: -20px; top: 0;
    }


    #my-breadcrumbs ul li a:before {
        content: "";
        position: absolute;

        margin-top: -15px;
        border-width: 20px 0 20px 20px;
        border-style: solid;
        border-color: grey grey grey transparent;
        left: -20px;
    }


    /* Hide the Before Pseudo Element */
    #my-breadcrumbs ul li:first-child a:before {
        display: none; }

    /* Add Border Radius */
    #my-breadcrumbs ul li:first-child a{
     border-bottom-right-radius: 1px;
    }


Source: jquery

Leave a Reply