Zymic Webmaster Forums > How To Create A Drop Down Menu

k.digennaro

Aug 25 2008, 06:30 PM

I saw a post a few days ago where some one was doing this using javascript. Frankly the exact same effect can be created using HTML/CSS and you don't have to worry about people not having javascript etc.

Getting Started:

To start this off we'll create our HTML document. We're going to start this off like any other HTML document we'd create.

CODE

Alright now we're set to get started. Pay close attention to the code because we are going to be using a lot of the same elements over and over, it can get you confused very quickly.

Let's open up a div tag for our menu.

CODE

From this point on, everything we create for our menu will be inside this div.

Alright, now if you look at the live example you'll see the "Home" section.

CODE

This is just made out of different list components. Rather simple, just make sure you close all the tags that need to be closed. Insert this code inside the div.

Now we'll move to the "About Us" section, this code will be very similar to the above code. Pay attention and see if you can see the differences.

CODE

<ul>
  <li><h2>About Us</h2>
    <ul>
         <li><a href="http://www.nascentdescent.com" title="About Us">Who Am I?</a></li>
         <li><a href="http://www.nascentdescent.com" title="About Us">What is my goal?</a>
     <li><a href="http://www.nascentdescent.com" title="About Us">How do I plan on suceeding?</a>
      </li>
    </ul>
  </li>
</ul>

All we did was create a couple extra list elements to create more than one option in the drop box.

Okay now this is where we can make our drop box a little more convenient for users. I'm going to create some options under the "Portfolio" Section. Hover over "Vectors" to see what this will look like.

CODE

<ul>
  <li><h2>Portfolio</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="Portfoilio">Web Templates</a></li>
      <li><a href="http://www.nascentdescent.com" title="Portfolio">Paintings</a>
      <li><a href="http://www.nascentdescent.com" title="Portfolio">Photos</a>
      <li><a href="http://www.nascentdescent.com" title="Portfolio">Vectors</a>
        <ul>
          <li><a href="http://www.nascentdescent.com">People</a>
                    <li><a href="http://www.nascentdescent.com">Objects</a>
                    <li><a href="http://www.nascentdescent.com">Cars</a>
                    <li><a href="http://www.nascentdescent.com">Places</a>
                       </li>
             </li>
           </li>
            </li>
         </li>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

The "Contact Us" section is the same as the "About Us" Section

CODE

<ul>
  <li><h2>Contact Us</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="About Us">Email Me</a></li>
      <li><a href="http://www.nascentdescent.com" title="About Us">Send me a letter</a>
            <li><a href="http://www.nascentdescent.com" title="About Us">Give me a Call</a>
      </li>
    </ul>
  </li>
</ul>

That's it for your HTML it should look something like this when you're done.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop Down Menu</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
</head>
<body>
<div id="menu">
<ul>
  <li><h2>Home</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="Home Page">Home</a>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>About Us</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="About Us">Who Am I?</a></li>
      <li><a href="http://www.nascentdescent.com" title="About Us">What is my goal?</a>
			<li><a href="http://www.nascentdescent.com" title="About Us">How do I plan on suceeding?</a>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Portfolio</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="SEO Consultants Directory Example">Web Templates</a></li>
			<li><a href="http://www.nascentdescent.com">Paintings</a>
			<li><a href="http://www.nascentdescent.com">Photos</a>
      <li><a href="http://www.nascentdescent.com">Vectors</a>
        <ul>
          <li><a href="http://www.nascentdescent.com">People</a>
					<li><a href="http://www.nascentdescent.com">Objects</a>
					<li><a href="http://www.nascentdescent.com">Cars</a>	
					<li><a href="http://www.nascentdescent.com">Places</a>	
                </li>
							</li>
						</li>
			        </li>
						</li>		
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Contact Us</h2>
    <ul>
      <li><a href="http://www.nascentdescent.com" title="About Us">Email Me</a></li>
      <li><a href="http://www.nascentdescent.com" title="About Us">Send me a letter</a>
			<li><a href="http://www.nascentdescent.com" title="About Us">Give me a Call</a>
      </li>
    </ul>
  </li>
</ul>							
</div>
</body>
</html>

Time to create the CSS, this is what will add the style to the HTML document.

Now the CSS is really pretty self explained, I'm just going to post it and you can ask questions if you need to.

CODE

#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}


#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}


#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
top: 0;
left: 100%;
}


div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}

Enjoy!
Kevin DiGennaro

Ed

Oct 16 2008, 09:42 AM

Thanks for this Kevin, I'm sure it will help someone

taylor28

Oct 16 2008, 12:10 PM

Thanks for those code you shared. But the link you have given is 404 in when I click it.

swordz

Oct 16 2008, 12:25 PM

To be honest, the original post is 2 months old...

And Bread should have noticed before he massively bumped it...

swordz

Ed

Oct 16 2008, 01:38 PM

QUOTE(swordz @ Oct 16 2008, 01:25 PM)

To be honest, the original post is 2 months old...

And Bread should have noticed before he massively bumped it...

swordz

The tutorial section is on an approve only basis, I approved it today (I had managed to glaze over it prior to this), then bumped it so everyone could see it.

swordz

Oct 16 2008, 01:56 PM

Sorry Bread...

swordz

IamShipon1988

Oct 17 2008, 05:48 PM

That is very nice tutorial, but did you get this to work on IE6? None of the dropdowns I know worked on IE6. Thats why I have choice but to use javascript for dropdowns

Alex

Oct 17 2008, 07:02 PM

You can do it, by nesting the drop-down element inside an <a> element, which is set to display on a:hover. a:hover works on IE6.

k.digennaro

Oct 18 2008, 03:33 AM

Thanks for the feed back guys, forgot i wrote this... lol

Edit: @Sazzad, Alex's method should work, but personally I use JS, just easier..lol
Edit: Sorry, the 404 is my bad

deleted the link lol, I'll upload it on another page and update the link

-Kevin

One more Edit: Links updated, sorry bout that was cleaning up my directories and didnt have the tut labeled well so i deleted it lol, also made a couple changes to the code, nothing noticeable just realized i had some style added to that first div, i tried to highlight it on the forums thats where it came from lol any ways enjoy!

hkcs1234

Oct 21 2008, 06:48 AM

Go to google and type in search box that "horizontal/vertical sucker tree menu" then you will get the very good link.Just integrate that code into your website thats all.

roblas

Oct 23 2008, 02:06 PM

Hi k.digennaro,

Thanks for sharing this, It's really helpful for me to create drop down menu.

sobuj

Oct 27 2008, 12:10 PM

QUOTE(Bread @ Oct 16 2008, 09:42 AM)

Thanks for this Kevin, I'm sure it will help someone

it did not wor for me and not for ur preveiw also. make a solve please

swordz

Oct 27 2008, 12:16 PM

Preview works for me.

What browser are you using?

swordz

ebharv

Oct 31 2008, 01:53 PM

Thanks for this tutorial, it is extremely helpful. And the best part is the full menu will always be shown to the user. This is an excellent tutorial.

death2y

Nov 7 2008, 10:29 PM

I'm having trouble using it, the preview works fine, but when I tried to use it it didn't work. My element containing the menu's id is navmenu, not menu, other than that, everything is the same.

CSS: http://pastebin.com/f13ce45c3

[edit] Fixed it, problem was fully with my html

rehmatsultan

Feb 11 2009, 10:22 PM

Domain naming server really count in this scenario

the_one

Feb 13 2009, 07:57 AM

preview works fine within the Opera, but it doesn't wtihin the IE

may someone explain why?

k.digennaro

Feb 13 2009, 08:12 PM

wat version of ie are you using?

although this tut is great and does work in most browsers your better off using some JS i use JS drops I just wrote this tut in response to a post a member wrote a while back, maybe if i get time ill write another one for a JS drop down although if you google it you'll find one easy.

Kevin DiGennaro

muad

Feb 15 2009, 04:25 PM

QUOTE(k.digennaro @ Aug 25 2008, 06:30 PM)

I saw a post a few days ago where some one was doing this using javascript. Frankly the exact same effect can be created using HTML/CSS and you don't have to worry about people not having javascript etc.

<snip - please don't quote whole posts that long>
Enjoy!
Kevin DiGennaro

thanks for the tutorial...
I need this tutorial

auscamp11

Feb 7 2011, 01:07 PM

This is helpful for html developer.... This is also helpful to me...

sherryabhy

Mar 10 2011, 04:27 AM

Thanks for this tutorial, it is helpful. & the best part is the full menu will always be shown to the user. This is an excellent tutorial.

safeguard

Apr 7 2011, 07:29 PM

QUOTE(sobuj @ Oct 27 2008, 12:10 PM)

it did not wor for me and not for ur preveiw also. make a solve please

WHAT A NICE SHARING

july

May 18 2011, 09:29 AM

as a beginer, there is a little hard to me~~

adam007

Aug 24 2011, 10:45 AM

thanks for sharing this code.

dick123

Sep 27 2011, 06:39 AM

thanks its a amazing post and very useful for us.

raj2719

Sep 27 2011, 12:48 PM

Use li ul and add styles background, color, hover to it to make a menu

shnooky

Oct 12 2011, 03:45 PM

The html developer is really helpful, thanks for sharing the tutorial. It cut out a lot of searching around time.

shnooky

Oct 14 2011, 07:08 PM

Thanks for sharing this Kevins, this post saved me alot of time.

paule123

Feb 2 2012, 05:55 AM

you can search on google, there are many free drop down menu which you can edit as per you requirement.

sheilaaellis44

Feb 10 2012, 10:42 AM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5, CSS3 and jQuery Navigation menu</title>
<link rel="stylesheet" href="css/nav.css">

</head>
<body class="no-js">
<nav id="topNav">
<ul>
<li><a href="#" title="Nav Link 1">Nav Link 1</a></li>
<li>
<a href="#" title="Nav Link 1">Nav Link 2
<ul>
<li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
<li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
<li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
<li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
<li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
</ul>
</li>
<li><a href="#" title="Nav Link 1">Nav Link 3</a></li>
<li><a href="#" title="Nav Link 1">Nav Link 4</a></li>
<li><a href="#" title="Nav Link 1">Nav Link 5</a></li>
</ul>
</nav>
<script src="js/jquery.js"></script>
<script src="js/modernizr.js"></script>
</body>
</html>

Mocchikins

Feb 15 2012, 02:44 PM

So that's how to do it. Thank you. :3

elbabemed

Jun 4 2012, 10:30 AM

This is helpful
thank you

fenomsalon

Jun 10 2012, 11:04 AM

that's good information

MegaBeet

Aug 1 2012, 09:00 AM

Helpful codes..Thanks for sharing!