HTML QUESTION

ashutosh singh

Total Post:7

Points:49
Posted by  ashutosh singh
HTML5 
 502  View(s)
Ratings:
Rate this:
How can we make menu and sub menu in HTML and CSS
  1. Mayank Tripathi

    Post:397

    Points:3117
    Re: html question

    We will start menu designing by creating a container using a div box. My div box will contain id of navigation. A navigation menu always requires Standard HTML as a basic tool for menu designing. In following script we will use a div tag, <ul> and <li> tags and create menu options.

    Finished HTML
    <div class="menu-wrap">
        <nav class="menu">
            <ul class="clearfix">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Movies <span class="arrow">&#9660;</span></a>
     
                    <ul class="sub-menu">
                        <li><a href="#">In Cinemas Now</a></li>
                        <li><a href="#">Coming Soon</a></li>
                        <li><a href="#">On DVD/Blu-ray</a></li>
                        <li><a href="#">Showtimes &amp; Tickets</a></li>
                    </ul>
                </li>
                <li><a href="#">T.V. Shows</a></li>
                <li class="current-item"><a href="#">Photos</a></li>
                <li><a href="#">Site Help</a></li>
            </ul>
        </nav>
    </div>

    CSS Script:
    body {
        background:#bf5c71 url('body-bg.jpg');
    }
     
    .clearfix:after {
        display:block;
        clear:both;
    }
     
    /*----- Menu Outline -----*/
    .menu-wrap {
        width:100%;
        box-shadow:0px 1px 3px rgba(0,0,0,0.2);
        background:#3e3436;
    }
     
    .menu {
        width:1000px;
        margin:0px auto;
    }
     
    .menu li {
        margin:0px;
        list-style:none;
        font-family:'Ek Mukta';
    }
     
    .menu a {
        transition:all linear 0.15s;
        color:#919191;
    }
     
    .menu li:hover > a, .menu .current-item > a {
        text-decoration:none;
        color:#be5b70;
    }
     
    .menu .arrow {
        font-size:11px;
        line-height:0%;
    }
     
    /*----- Top Level -----*/
    .menu > ul > li {
        float:left;
        display:inline-block;
        position:relative;
        font-size:19px;
    }
     
    .menu > ul > li > a {
        padding:10px 40px;
        display:inline-block;
        text-shadow:0px 1px 0px rgba(0,0,0,0.4);
    }
     
    .menu > ul > li:hover > a, .menu > ul > .current-item > a {
        background:#2e2728;
    }
     
    /*----- Bottom Level -----*/
    .menu li:hover .sub-menu {
        z-index:1;
        opacity:1;
    }
     
    .sub-menu {
        width:160%;
        padding:5px 0px;
        position:absolute;
        top:100%;
        left:0px;
        z-index:-1;
        opacity:0;
        transition:opacity linear 0.15s;
        box-shadow:0px 2px 3px rgba(0,0,0,0.2);
        background:#2e2728;
    }
     
    .sub-menu li {
        display:block;
        font-size:16px;
    }
     
    .sub-menu li a {
        padding:10px 30px;
        display:block;
    }
     
    .sub-menu li a:hover, .sub-menu .current-item a {
        background:#3e3436;
    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!