Responsive Navigation

Multi-Level Responsive Navigaiton Using Pure CSS

by liammccann1992

HTML

<nav id="menu" role="navigation" class="hide-for-small"> <a href="#menu" title="Show navigation">Show navigation</a>
 <a href="#" title="Hide navigation">Hide navigation</a>

    <ul class="nav-bar topnav-menu">
        <li class="noDropDown "> <a href="#">My Home</a>

        </li>
        <li class="noDropDown "> <a href="#">Steel</a>

        </li>
        <li class="noDropDown "> <a href="/">Aluminium</a>

        </li>
        <li class="noDropDown "> <a href="/">Base Metals</a>

        </li>
        <li class="noDropDown "> <a href="/">Fertillizers</a>

            <li class="noDropDown "> <a href="/">Tools </a>

            </li>
            <li> <a class="menu-active" href="http://mycru.dev.testcru.co.uk/">My Documents</a>

                <ul>
                    <li> <a href="http://mycru.dev.testcru.co.uk/">Favourites</a>

                    </li>
                    <li> <a href="http://mycru.dev.testcru.co.uk/Title/Grid">Product Library</a>

                    </li>
                    <li> <a href="http://mycru.dev.testcru.co.uk/Search/">Product Search</a>

                    </li>
                </ul>
            </li>
            <li class="menuitem-right "> <a href="">My Account</a>

                <ul>
                    <li> <a href="http://mycru.dev.testcru.co.uk/Account/Details">Account Details</a>

                    </li>
                    <li> <a href="http://mycru.dev.testcru.co.uk/Account/Configuration">Account Settings</a>

                    </li>
                    <li> <a href="http://mycru.dev.testcru.co.uk/Email/Preferences">Email Settings</a>

                    </li>
                    <li class="drop-divider"></li>
                    <li> <a href="http://mycru.dev.testcru.co.uk/Account/Logoff">Logout</a>

                    </li>
                </ul>
            </li>
            <li class="menuitem-right noDropDown"> <a href="http://mycru.dev.testcru.co.uk/Help">Help</a>

            </li>
    </ul>
</nav>

CSS

* {
    position: relative;
}
#menu {
    width:100%;
    background-color: #e15a1f;
}
#menu ul {
    width:100%;
    margin: 0 auto;
    list-style-type:none;
}
#menu > a {
    display: none;
}
#menu li a {
    color: #fff;
    display: block;
}
#menu li a:active {
    background-color: #c00 !important;
}
/* first level */
 #menu > ul > li {
    background-color: #e15a1f;
    padding:0.8em;
    float: left;
    display:inline-block;
}
#nav > ul > li > a {
    height: 100%;
    text-align: center;
}
#nav > ul > li:not(:last-child) > a {
    border-right: 1px solid #cc470d;
}
#menu > ul > li:hover, #menu > ul:not(:hover) > li.active {
    background-color: #cc470d;
}
/* second level */
 #menu li ul {
    background-color: #cc470d;
    display: none;
}
#menu li:hover ul {
    display: inline-block;
}
#nav li:not(:first-child):hover ul {
    padding:0;
}
#menu li ul a {
  
    border-top: 1px solid #e15a1f;
    padding: 0.75em;
    /* 15 (20) */
}
#menu li ul li a:hover, #menu li ul:not(:hover) li.active a {
    background-color: grey;
}


@media only screen and (max-width: 2222em)
/* 640 */
 {
    #menu > a {
        width: 3.125em;
        height: 3.125em;
        text-align: left;
        text-indent: -9999px;
        background-color: #e15a1f;
        position: relative;
    }
    #menu > a:before, #menu > a:after {
        position: absolute;
        border: 2px solid #fff;
        top: 35%;
        left: 25%;
        right: 25%;
        content:'';
    }
    #menu > a:after {
        top: 60%;
    }
    #menu:not(:target) > a:first-of-type, #menu:target > a:last-of-type {
        display: block;
    }
    /* first level */
    #menu > ul {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
    #menu:target > ul {
        display: block;
    }
    #menu > ul > li {
        width:80%;
        background-color:grey;
    }
    #menu > ul > li > a {
        height: auto;
        text-align: left;
      ...