How to Create a Web Page with HTML5 and CSS

How to Make a Drop Down Menu

You should complete these lessons in order. If you haven't completed the first 6 exercises, go back and start at the beginning. Exercise #1

Phase 2

The biggest request we got after people finished the original tutorial was how to add a drop down menu.

We'll do 2 things in this exercise. First we'll show you how to make it. Then, we'll show you how to make it Mobile Ready and Responsive.

Examine the block of code shown below before you paste it in.

Phase 2 - Exercise #2

Create an open space by placing your cursor after the closing anchor tag of Media Queries and tapping enter a couple of times as shown:

ding">Media Queries</a>I</li>. Place the cursor as shown in red and tap the enter key a couple of times. Should look like the code shown below.

You will repeat the operation twice; once for Media Queries and again for Contact.

Create it first

Drop down menus are created using nested lists. That simply means we place another list inside the link item of the original list.

<nav>


<ul class="hnavbar">
<li><a href="#heading">Home</a></li>
<li><a href="#heading">Media Queries</a>


<li>
<li><a href="#heading">Drop Down Menu</a></li>
<li><a href="#heading">Contact</a></li>
</ul>


</nav>

Now we're going to nest another list in the space provided above:

Copy and paste the code in red into the space you created above.

<li><a href="#heading">Media Queries</a>

<ul>
<li><a href="#heading">Image Controls</a></li>
<li><a href="#heading">Text Controls</a></li>
<li><a href="#heading">Centering</a></li>
</ul>

<li>

Save myfirstpage.html

If you were to preview the page now you'd see 2 rows of buttons,so.......
let's add the CSS that makes it work as a drop down menu.

Copy and paste under the comment /* End first tier hnavbar */

/*--- DROPDOWN ---*/
.hnavbar ul{
	background: transparent;
	list-style:none;
	position:absolute;
	left:-9999px;}
.hnavbar ul li{
	padding-top: 0px;
	float:none;
  width: 150%}
.hnavbar ul a{
	white-space:nowrap;}
.hnavbar li:hover ul{left:0;}
.hnavbar li:hover a{ 
	background:#2e2e2e;
	text-decoration:none;}
.hnavbar li:hover ul a{ 
	text-decoration:none;}
.hnavbar li:hover ul li a:hover{
	background:#696969;}

Save myfirstpage.html

Preview the web page and see how it works.

When you hold the mouse pointer over the Media Queries button you should see 3 drop down 2nd tier links.

The page looks fine on an IpadMini at 768 pixels wide.

Update lmenu.html

Now you're going to copy and paste the entire drop down menu into lmenu.html. You will repeat this procedure each time you update your main menu.

Copy and paste the code in dark red between the onclick buttons replacing the current code of lmenu.html

<ul class="hnavbar">
<li><a href="#heading">Home</a></li>
<li><a href="#heading">Media Queries</a>
<ul>
<li><a href="#heading">Image Controls</a></li>
<li><a href="#heading">Text Controls</a></li>
<li><a href="#heading">Centering</a></li>
</ul>
</li>
<li><a href="#heading">Drop Down Menu</a></li>
<li><a href="#heading">Contact</a></li>
</ul>

Save lmenu.html

The Result

Your finished product should look like the pictures in lesson one.

Test the page by resizing the browser window to different widths.

How to Use the Web Developers Emulator Tool

The Web Developers Emulator tool allows you to simulate viewing your finished web pages in different sized devices. Cell phones, tablet, laptops, desk tops and anything in between. Check out our new Emulator Tutorial.

What's Next

You've completed this tutorial. The finished product is very close to the pages in the Template Kit #402 offered on our home page. There are some differences.

I highly recommend that you delete all your work and start through the tutorial again.

Try to develop your own system for copying and pasting code and previewing in a browser.

Run through the tutor as many times as you can until you're comfortable with the process.

View your web page in the browser before and after you add the changes to your style sheet.

If you've found one, complete the exercises using your HTML editor.

Advancing with RWD

We're updating our free templates to RWD.

The HTML code and CSS techniques are pretty close to what has been presented here. Try one.

Single Column Design
Two Column Design
Multi Column Design