Hello Friends,
I want to create a menu bar in which have some sub menu item. Tell me how to i create.

This is a normal menu with no sub menu:

Code:


<ul>
    <li><a href='#'>home</a></li>
    <li><a href='#'>about</a></li>
</ul>


To create a sub-level menu, you need to do this:

Code:


<ul>
    <li><a href='#'>home</a></li>
    <li><a href='#'>about</a>
          <ul>
              <li><a href='#'>our history</a></li>
              <li><a href='#'>mission statement</a></li>
          </ul>
    </li>


You basically create another unordered list but you need to create it within the list-item where you want the drop down to appear.

You will have some work to style it how you want.

Regards,

NT.

Thanks Nanotechnology

/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid orange;
z-index: 1;
left: -99999em;
}
.nav > li:hover > ul {
left: auto;
margin-top: 5px;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
/* arrow hover styling */
.nav > li > a:first-child:nth-last-child(2):before {
border-top-color: #aaa;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: orange;
margin-top:-5px
}
.nav li li > a:first-child:nth-last-child(2):before {
border-left-color: #aaa;
margin-top: -5px
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: orange;
right: 10px;
}