List and Indicators

by Keith Jeter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="maine">
    <ul>
        <li><a><span class="glyphicon glyphicon-list"></span>One</a></li>
        <li><a><span class="glyphicon glyphicon-book"></span>Two</a></li>
        <li>
            <a><span class="glyphicon glyphicon-equalizer"></span>Three</a>
            <ul>
                <li><a>3-1</a></li>
                <li><a>3-2</a></li>
            </ul>
        </li>
        <li><a><span class="glyphicon glyphicon-film"></span>Four</li>
    </ul>
</div>

CSS

body { margin: 0; padding: 0; }

a { color: #fff; }
a:hover { color: #000; font-weight: bold; }

.maine {
    width: 100%;
    height: 52px;
    background: #000;
    position: fixed;
    padding: 0;
    margin: 0;
}

.maine ul { 
    color: #fff;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.maine ul li { 
    border-right: solid 1px #aaa;
    border-left: solid 1px #000;
    width: 150px;
    height: 52px;
    float: left;
    display: inline;
}

.maine ul li:first-child { border-left: none; }
.maine ul li:last-child { border-right: none; }

.maine ul li a { 
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    text-transform: capitalize;
    background: #444;
    padding: 0;
    margin: 0;
    line-height: 50px;
}
.maine ul li:before { 
    content: "";
    position: absolute;
    z-index: 0;
    width: 0;
    height: 0;
    bottom: 0;
    margin-left: 0;
    border-bottom: 15px solid red;
    border-right: 15px solid transparent;
}
.maine ul > li:hover:before {    
    border-bottom: 15px solid black;
    border-right: 15px solid transparent;
}

.maine ul li a:hover { background: orange; /*border-bottom: solid 4px green;*/ }
.maine ul li .glyphicon { text-align: center; padding-right: 10px; color: #fff; }
.maine ul li a:hover .glyphicon { color: #000; }
.maine ul li ul { 
    position: absolute;
    display: none;
    width: inherit;
}

.maine li:hover ul { display: block; margin-left: -1px; }

.maine ul li ul li, .maine ul li ul li:before { border: none!important; }

.maine ul li ul li a {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    background: #333;
    padding: 0;
    margin: 0;
    line-height: 50px;
}

.maine ul li ul li ul li, .maine ul li ul li ul li:before { border: none; }

.maine ul li ul li ul li a {
    cursor: pointer;
    display: inline-block;
   ...