Adding submenu in attached HTML

i want to put sub-menu under the main menu in attached html/css file.  please help me for same.  also i have been attached all files.
template-2.zip
Razi AbbasAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Prasadh BaapaatWeb Designer & DeveloperCommented:
Hello Gaurav,
you will have to use drop-down menu for sub-menus to be shown under the main menu.

to add a drop-down submenu to your menu please follow instructions below:

1) add below 2 code lines in your CSS to:

a)     .topmenu ul li {
b)     .topmenu ul li a {
display: block;
position: relative;

Open in new window


2) add the below code to your CSS (after the .topmenu styles you have made)


/* css for sub menu */
.topmenu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  
}
.topmenu ul ul li a {
  background: #000;
  min-width: 25px;
  float: left;
  margin-left: -23px;
  white-space: nowrap;
}
.topmenu ul li:last-child li {
	float: right;
	margin-right: 23px;
}
.topmenu ul li:hover ul {
  display: block;
}
/* sub menu css end*/

Open in new window

3) Add submenus to the top menu as below (replace your <div class="topmenu">...</div> lines with this code)

<div class="topmenu">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="#">About&nbsp;Us</a>
  	<ul>
		<li><a href="#">New Sub Menu</a></li>
		<li><a href="#">Even if Sub Menu is long, its no problem</a></li>
      </ul>
  </li>
  <li><a href="#">What's&nbsp;New</a>
  </li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Resources</a></li>
  <li><a href="#">Links</a>
  	<ul>
		<li><a href="#">Last Sub Menu</a></li>
		<li><a href="#">last Sub Menu opens on left side so it does not go outside the page</a></li>
	</ul>
  </li>
</ul>
</div>

Open in new window

This is how the sub menu will look on your page...change the sub menus as per your requirements in above menu list.

The above CSS code is for Gaurav's page as per his attachment... others may have to change the CSS a bit to adjust as per their menu style.
thanks,
Prasadh

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Razi AbbasAuthor Commented:
Thanks . Its working very well.
Razi AbbasAuthor Commented:
How can we create sub menu in sub menu please help
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.