Andronaco UI kit parts

parts: blocknav, tabNav

by Victor

HTML

<div class="blockNav">
    <ul>
        <li class="current"><a href="#">link</a>
        </li>
        <li><a href="#">link</a>
        </li>
        <li><a href="#">link</a>
        </li>
        <li><a href="#">link</a>
        </li>
        <li><a href="#">link</a>
        </li>
    </ul>
</div>

<div class="tabNav">
    <ul>
        <li class="current"><a href="#">link</a>
        </li>
        <li><a href="#">link</a>
        </li>
        <li><a href="#">link</a>
        </li>
        <li><a href="#">link</a>
        </li>
        <li><a href="#">link</a>
        </li>
    </ul>
</div>

CSS

.blockNav {
    background:#3498db;
}
.blockNav ul li {
    display:inline-block;
    padding:10px;
    background:#222;
    margin:0;
}
.blockNav ul li a {
    color:white;
    font-weight:bold;
    text-decoration: none;
}
.blockNav ul {
    padding:0;
    margin:0;
}

.tabNav {
    background:#e3e3e3;
    padding-top:10px;
}
.tabNav ul {
    padding:0 4px 0;
}
.tabNav ul li {
    display:inline-block;
    background:#3498db;
    border-radius:5px 5px 0 0;
}
.tabNav li:hover {
    background:white;
}
.tabNav li:hover a {
    color:#222;
}
.tabNav li.current {
    background:white;
}
.tabNav li.current a {
    color:#222;
        border-radius:5px 5px 0 0;
}
.tabNav ul li a {
    color:white;
    display:inline-block;
    padding:10px 15px 5px;
    font-weight:bold;
    text-decoration: none;
    
}