forum

home / developersection / forums / html question

Ask Question

html question

ashutosh singh 1723 05-Jan-2016
How can we make menu and sub menu in HTML and CSS
html html5 
Updated on 05-Jan-2016
ashutosh singh

Other

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

05-Jan-2016
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;
}

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy