---
title: "html question"  
description: "html question"  
author: "ashutosh singh"  
published: 2016-01-05  
updated: 2016-01-05  
canonical: https://www.mindstick.com/forum/33833/html-question  
category: "html"  
tags: ["html5"]  
reading_time: 2 minutes  

---

# html question

How can we make menu and sub menu in [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) and [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem)

## Replies

### Reply by Anonymous User

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;}
```

\


---

Original Source: https://www.mindstick.com/forum/33833/html-question

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.