JSFiddle - React, Tailwind, and code Playground

Simple CSS3 Menu

by Jennifer Perrin

HTML

<ul id="css3-menu" class="dark">
        <li>
            <a href="">Keynotes</a>
            <div class="keynote"></div>
        </li>
        
        <li>
            <a href="">Design</a>
            <div class="drop"></div>
        </li>
        
        <li>
            <a href="">Development</a>
            <div class="code"></div>
        </li>
        
        <li>
            <a href="">Hosting</a>
            <div class="database"></div>
        </li>
        
        <li>
            <a href="">Marketing</a>
            <div class="target-1"></div>
        </li>
        
        <li>
            <a href="">Offices</a>
            <div class="compass"></div>
        </li>
        
        <li>
            <a href="">Typography</a>
            <div class="typography"></div>
        </li>
        
        <li>
            <a href="">Store</a>
            <div class="trolley"></div>
        </li>
        
        <li>
            <a href="">Share the Love</a>
            <div class="heart"></div>
        </li>
        
    </ul>

CSS

/* css3 menu */
ul#css3-menu{
    width: 960px;
    min-width: 960px;
    margin: 50px auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    list-style: none;
    font-family: 'Open Sans', Arial, "MS Trebuchet", sans-serif;
    height: 38px;
    padding: 0;
}

ul#css3-menu > li{
    display: block;
    float: left;
    -webkit-transition: background .4s linear;
    -moz-transition: background .4s linear;
    -ms-transition: background .4s linear;
    -o-transition: background .4s linear;
    transition: background .4s linear;
    
    <!--[if IE]>
    position: relative;
    <![endif]-->
}

ul#css3-menu > li:first-child{
    border-left: none !important;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    
    -ms-border-top-left-radius: 4px;
    -ms-border-bottom-left-radius: 4px;
    
    -o-border-top-left-radius: 4px;
    -o-border-bottom-left-radius: 4px;
    
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

ul#css3-menu > li:last-child{
    border-right: none !important;
}


ul#css3-menu > li > a{
    display: block;
    padding: 10px 16px;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

ul#css3-menu > li:hover > div{
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    -o-transform: translateY(-80px);
    transform: translateY(-80px);
    /*visibility: visible;*/
}

ul#css3-menu > li > div{
    -webkit-transition: -webkit-transform .2s linear;
    -moz-transition: -moz-transform .2s linear;
    -ms-transition: -ms-transform .2s linear;
    -o-transition: -o-transform .2s linear;
    transition: transform .2s linear;
    text-align: center;
    margin: 0 auto;
    -webkit-transform: translateY(-60px);
    -moz-transform:...