Code2care : Simple Pure CSS Lightweight Horizontal Menu

A simple pure CSS based lightweight navigation menu.

by Swami

HTML

<h2 class="heading">Code2care : Simple Pure CSS Lightweight Horizontal Menu</h2>

<ul class="nav">
    <li class="nav-logo"><a href="http://code2care.org">LOGO</a></li>
    <li class="nav-option"><a href="https://play.google.com/store/apps/developer?id=Code2care&hl=en">Apps</a></li>
    <li class="nav-option"><a href="https://code2care.org/tools">Tools</a></li>
    <li class="nav-option"><a href="https://code2care.org/tutorials">Tutorials</a></li>
    <li class="nav-option"><a href="http://code2care.org/topic/sharepoint/page-1/">Sharepoint</a></li>
    <li class="nav-option"><a href="http://code2care.org/topic/android/page-1/">Android</a></li>
    <li class="nav-option"><a href="http://code2care.org/topic/android-studio/page-1/">Android Studio</a></li>
</ul>

CSS

body {
    margin: 0;
    padding: 0;
}

.heading {
    padding:20px
}


/* CSS Menu : Start */
.nav {
    width:100%;
    background:#e8e8e8;
    margin: 0;
    padding: 0;
        border-top:1px solid #cfcfcf;
     border-bottom:1px solid #cfcfcf;
}
.nav li {
    display: inline;
    line-height: 37px;
    padding:10px;
    display:inline;
}
.nav-logo {
    background:#d8d8d8;
    border-right:1px solid #b8b8b8;
    border-left:1px solid #ccc;

}
.nav-logo a {
    text-decoration:none;
    color:#222;
    font-size:18px;
}
.nav-option a {
    text-decoration:none;
    color:#111;
    font-size:18px;
}
.nav-option {
    background:#e8e8e8;

}
.nav-option:hover {
    background:#ddd;
}

/* CSS Menu : End */