iamtekeste · February 26, 2015 13:23
diff --git a/Slide Up Menu b/Slide Up Menu
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">

    a {
        display: block;
        font-family: Helvetica, sans-serif;
        padding: 5px 10px;
        text-align: center;
    }
    
    .spacer {
        height: 200px;
        background: #f00;
    }

    .main-menu {
        width: 960px;
        margin: 0 auto;
        position: relative;
        height: 46px;
        list-style: none;
        transition: all .2s ease-in-out;
    }

    .has-child {
        position: absolute;
        width: 22%;
        bottom: 0;
        transition: all .2s ease-in-out;
    }

    .has-child > a {
        display: block;
        height: 46px;
        line-height: 46px;
        padding: 0 10px;
        text-align: center;
        transition: all .2s ease-in-out;
    }

    .has-child:hover > a {
        color: #fff;
        background: #00f;
    }

    .has-child:hover .sub-menu {
        height: 150px;
    }

    .has-child:nth-child(1) {
        left: 0;
    }
    
    .has-child:nth-child(2) {
        left: 25%;
    }

    .has-child:nth-child(3) {
        left: 50%;
    }

    .has-child:nth-child(4) {
        left: 75%;
    }

    .sub-menu  {
        top: 46px;
        width: 100%;
        background: #fff;
        list-style: none;
        height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        transition: all .2s ease-in-out;
    }


    </style>

 </head>
 <body>

 <div class="spacer"></div>

 <ul class="main-menu">
    <li class="has-child">
        <a href="#">Main Menu Item</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li class="has-child">
        <a href="#">Main Menu Item</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li class="has-child">
        <a href="#">Main Menu Item</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li class="has-child">
        <a href="#">Main Menu Item</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
 </ul>

 <div class="spacer"></div>
    
 </body>
 </html>
No results found