Create a vertical menu in CSS3 and HTML

DEMO

The Concept

Simple menus using CSS3 and HTML5 are becoming quite popular because you don’t need JQuery or JavaScript to add animations. We will demonstrate a quick way to create a nice, clean vertical menu with a sub menu which slides out.

CSS Vertical Menu, With Sub Menu

The menu will use a nested <ul> element to show the sub menu.

HTML 5 Markup

<nav id="menu">

        <ul class="parent-menu">

            <li><a href="#">Home & Kitchen</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Electronics</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul></li>

            <li><a href="#">Clothing</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul></li>

            <li><a href="#">Cars & Motorbikes</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Books</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Support</a>

                <ul>

                    <li><a href="#">Contact Us</a></li>

                    <li><a href="#">Forum</a></li>

                    <li><a href="#">Deliveries</a></li>

                    <li><a href="#">T&C</a></li>

                </ul>

            </li>

        </ul>

    </nav>

CSS​

Parent CSS

   p, ul, li, div, nav
        {

            padding:0;
            margin:0;
        }


        body
        {
            font-family:Calibri;
        }


        #menu {
            overflow: auto;
            position:relative;
            z-index:2;
        }


        .parent-menu {
            background-color: #0c8fff;
            min-width:200px;
            float:left;
        }


        #menu ul
        {
            list-style-type:none;
        }


        #menu ul li a
        {

            padding:10px 15px;
            display:block;
            color:#fff;
            text-decoration:none;
        }


            #menu ul li a:hover
            {
                background-color:#007ee9;
            }

The menu works in a very simple way. The parent container needs to be positioned relative so that the submenu can show inside of it. You also need to set the z-index so the parent menu is above the submenu (this will be described later). Each <li> element is floated left and has a min-width so they are equal in size. Do not give the <li> a display block or inline-block, as this will make them float side by side.

Sub Menu

#menu ul li:hover > ul {

                left: 200px;

                -webkit-transition: left 200ms ease-in;

                -moz-transition: left 200ms ease-in;

                -ms-transition: left 200ms ease-in;

                transition: left 200ms ease-in;

            }


            #menu ul li > ul {

                position: absolute;

                background-color: #333;

                top: 0;

                left: -200px;

                min-width: 200px;

                z-index: -1;

                height: 100%;

                -webkit-transition: left 200ms ease-in;

                -moz-transition: left 200ms ease-in;

                -ms-transition: left 200ms ease-in;

                transition: left 200ms ease-in;

            }


            #menu ul li > ul li a:hover

            {

                background-color:#2e2e2e;

            }

The submenu is positioned absolute and is floated left:-200px, which will make it show off screen. When we hover over the parent <li> we show the <ul> element underneath (>) this <li>. We position it left:200px so it comes in view side by side to the parent menu, and we also give it a height of 100% so it remains equal.

You must set the z-index to -1 so that the menu is underneath the parent menu. This will allow it to slide properly without any jerking.

Notes

If you change the width of the parent or submenu make sure you change the left position value of the submenu.

To change the speed of the animation set the numeric value in this code as you like.

-webkit-transition: left 200ms ease-in;
 -moz-transition: left 200ms ease-in;
 -ms-transition: left 200ms ease-in;
 transition: left 200ms ease-in;

The menu has been tested in Chrome 34+, Firefox 28.0+, and IE 11.0.