How to Create Web Pages with HTML5

Creating 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 friendly.

Phase 2 - Exercise #2

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.

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

Create some space after the closing anchor tag </a>. Should look like the code shown in blue.

Copy and paste the code in drk red into the space as shown:

<nav id="nowhere"> <ul class="hnavbar"> <li><a href="index.html">Home</a></li> <li><a href="#nowhere">About Us</a> <ul> <li><a href="#nowhere">2nd Tier Link</a></li> <li><a href="#nowhere">2nd Tier Link</a></li> <li><a href="#nowhere">2nd Tier Link</a></li> </ul> </li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav>

Now let's add the CSS that makes it work.

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 firstpage.html

Preview the web page and see how it works.

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

Stepping into the world of
Responsive Web Design

A little gadget in CSS3 makes it possible to change the appearance of your web page to adapt to the size of device screen that loads it.

As our last entry in the stylesheet we'll add a simple media query that will adapt the web page to devices with screens from 240 pixels to 480 pixels wide.

Except for the menu this isn't that hard a task with a one column page.

The media query is really valuable when used with multiple column pages that contain images that need to be reduced in size for smaller screens.

Add the Media query

Copy and paste as the last entry in your stylesheet.

@media all and (max-width: 480px) {
header , nav ,  .main ,  .hnavbar, .hnavbar li ul {
width: 90% !important;
display: block !important;
padding:0 5% !important;
margin: 0 0 !important;
border: none;}
header h1 {font-size: 20px;float: none; text-align:center;padding: 0 0 ;margin: 0 0}

.main h1{float: none; text-align: center}
.hnavbar li , .hnavbar li ul li {
width: 100%;
text-align: center;
margin: 0 0;}
.hnavbar li a {
padding: 5% 0;}
.hnavbar li ul {
z-index: 10}

 img {
float: none;
display: block;
max-width: 99%;
margin: 0 auto}
}

Save firstpage.html

The query starts by reseting the widths of all division type element and the navbar to full width. It resets the padding for each.

Then it resizes and centers the header text.

Next it reconfigures the drop down buttons.

Last it centers the image and contains it with the max-width property.

That's It!!

The Result

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

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

If you have a FireFox browser there is a Responsive Web Design tool in the developer tools section you can use to view at various width settings.

What's Next

You've completed this tutorial.

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.

CSS Tutorial

Want to extend your knowledge of building your web pages with advanced CSS techniques? We found a great 7 step tutorial. Highly recommended: CSS Tutorial.

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

Tell us what you think. Was this tutor helpful? How can we improve?

If you are having problems or need an answer to a question, you can contact me using this form.