css menu 1

sumber http://devgrow.com/slick-animated-menus-using-only-css3/

by kurnia1

HTML

<ul class="nav2">
    <li><a href="/"><strong>Home</strong><em>Home</em></a></li>
    <li><a href="/"><strong>About Us</strong><em>About Us</em></a></li>
    <li><a href="/"><strong>Portfolio</strong><em>Portfolio</em></a></li>
    <li><a href="/"><strong>Services</strong><em>Services</em></a></li>
</ul>

CSS

.nav2 { list-style: none; }
.nav2 li { float: left; position: relative; }
.nav2 a {
    display: block;
    float: left;
    border: none;
    position: relative;
    height: 22px;
    overflow: hidden;
    }
.nav2 a strong, .nav2 a em {
    cursor: pointer;
    padding: 4px 8px;
    font-weight: bold;
    font-style: normal;
    display: block;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    }
.nav2 a strong {
    position: relative;
    top: 0;
    left: 0;
    color: #000;
    background: #fff;
    }
.nav2 em {
    position: absolute;
    top: 100%;
    background: #000;
    color: #fff;
    }
.nav2 a:hover strong {
    top: -100%;
    }
.nav2 a:hover em {
    top: 0;
    }