[Cap]

How to Create a Basic Drop Down Navigation Menu Using HTML and CSS

By: l Flawless l

Description:
Learning HTML and CSS can be tedious and time consuming if you don't have a general background in the field. It's quite simple to create a navigation bar, but a lot of people struggle with figuring out how to create a drop down menu upon hovering on a list item. In this tutorial, you will learn how to create the drop down menu in full detail so you can learn and fully understand the functionality of this much needed modification.

If you don't feel like reading this tutorial and want to be lazy and download the source, you can find the download link in the conclusion.

Tutorial skill level: Novice/Beginner

End Product:


What you need:
1. Text editing software with syntax highlighting (Any text editing software will work, just syntax highlighting is recommended). Recommended editors are:

• Windows: Notepad++
  
• Mac: Sublime Text (Note, this costs money)
  
• Mac Free Alternative: TextWrangler
  

2. Basic HTML and CSS background
3. Internet for live previews
4. The will to learn and be creative

Table of Contents:
Step 1: Creating the general HTML structure
Step 2: Developing the drop down menu through HTML
Step 3: Implementing CSS to design and make drop down menu functional
Step 4: Small customizations

Step 1. First things first, we need to setup the HTML structure so that we can create our navigation bar. I’m going to assume that you know the basics of HTML, so I’m not going to go into depth about this first part. Open up a new document in your text editor. Lets start with a simple structure as follows:

Code

<!DOCTYPE html>
<html>

<head>
<title>
Navigation Bar
</title>
</head>

<body>

</body>

</html>

This is the basic structure of a webpage. So for the sake of this tutorial, we are just using that.

Step 2. Now onto the creation of the actual drop down navigation bar. Between the ‘body’ tags, we need to develop some code to actually create our navigation bar. The ‘body’ tags are what holds all of your content so it can be displayed virtually on the web. I’m sure you are well aware of how to create a navigation bar and the basic format of it, basically using an unordered list to display your menu items, but a lot of people don’t understand how to create a drop down menu; well, it’s the same exact structure, just nested. So inside the ‘body’ tags, go ahead and write this code, substituting and editing all of the menu items you want:

Code

<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a>
      <ul>
      <li><a href="#">6-Week Program</a></li>
      <li><a href="#">Supplementation</a></li>
      <li><a href="#">Diet/Nutrition</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

As you can see, we created an unordered list called ‘navigation’. Inside the navigation, we have four list items named ‘Home’, ‘About Us’, ‘Services’, and ‘Contact’. Now, here is where the drop down menu comes into play. Nested in the ‘Services’ list item, there is another unordered list with a few more list items named ‘6-Week Program’, ‘Supplementation’, and ‘Diet/Nutrition’, these three are the options you can click on when you hover over the ‘Services’ menu item. Go ahead and save this as anything you’d like, I’m calling mine navigation.html. Once you saved it, open it up in your browser to see what it looks like thus far. You should be presented with a screen like this:



Now, this looks hideous as there is no format or functionality to it. But notice how underneath ‘Services’ the three subitems are indented and bulleted? That’s good because we know that they are in fact nested to the ‘Services’ list item. Since we have the basic structure down, lets make it look nice and actually implement a drop down menu using CSS.

Step 3. Open up a new document in whatever text editor you are using (either Notepad++ or Sublime Text are recommended). Lets go ahead and call this style.css. We are now going to actually design the navigation bar so it is fully functional. First thing we want to do is add this piece of code:

Code

/* This applies to all unordered list tags */
ul {
    font-family: "Trebuchet MS", Helvetica, sans-serif; /* Font style */
    font-size: 14px; /* Navigation list item font size */
    padding: 0; /* Used for proper alignment */
}

Basically, what is happening here is for all unordered lists (ul), the font will be "Trebuchet MS", it will be 14px in size, and have no padding around it. Going back to our HTML code, remember how we created an unordered list for our navigation bar? This is how we actually add functionality and put design to it. Whatever we do in our CSS will directly impact our HTML, once we link the two. If you were to save both the CSS and HTML file and opened up the HTML, you wouldn't see any difference at all because we actually haven't linked the two files together yet, we will save that until the end.

Now that we have the 'ul' tag covered, underneath the code you just wrote in the CSS, we want to add this:

Code

/* The tag that is for the list items of unordered lists */
ul li {
    display: block;
    position: relative;
    float: left; /* Puts list items next to each other instead of on top of one another */
}

In the code above, we are simply talking about the list items that are in our unordered list. Remember in our HTML file how our list items are: 'Home', 'About Us', 'Services', and 'Contact'? What we are doing now is creating a design to make our list items work and look proper so they are fully functional. The display is in a block formation, meaning that the list items take up the whole width, so there is no awkward spacing. With the relative position, this simply means that this element can overlap other items, but a specific space is reserved for the specific element, in this case being the list items. Finally, floating left simply means that the list items will be pushed to the left, allowing proper spacing.

Now underneath the ul li, we are going to add another block of code:

Code

li ul {
    display: none; /* Required for spacing and formatting */
}

This is where the drop down list items get implemented. The 'li ul' simply means the unordered list embedded into one of the list items, in this case being 'Services'. We set the display to none so it allows proper spacing and formatting.

The next block of code are the actual links themselves:

Code

/* Links of the list items */
ul li a {
    display: block; /* Properly aligns navigation bar's display */
    text-decoration: none; /* No underline under links */
    /* border-top: 1px solid #ffffff; */ /* Uncomment previous line if you want spacing between drop down items */
    padding: 5px 20px 5px 20px; /* Spaces out list items so they aren't compact */
    background: #fa7151; /* Background color of menu items */
    color: #ffffff; /* Font color */
    white-space: nowrap; /* Keeps drop down menu items on one line */
}

With 'ul li a', this is looking at the unordered list's list item links - meaning what you actually click. Once again, the display is in block formation meaning that the elements are full width and have proper spacing. Text-decoration is set to none, meaning that there is no underline or anything. Border-top is an actual border of the element. If you want to have a white border, you can choose to or not with this function. Padding is the spacing of the list items. You can input the amount of pixels that you want the list items spread out and whatnot, so you can play around with those values if you'd like. Background is the color of the list items. Color is the color of the font. Essentially background is the background color and color is the foreground color, as confusing as that sounds. Finally, white-space, we keep this as no wrap. This ensures that the drop down menus are on one single line and there is no wrapping to the next line, messing up the display.

Now that we covered the largest block of code, underneath everything we just wrote, we want to add what happens when you hover over a list item:

Code

/* The tag used for the hovering on the list items */
ul li a:hover {
    background: #3e3e3e; /* Color of menu items on mouse hover */
}

This one is simple enough. What we wrote this code for is so when your mouse hovers over a list item link, the background color will change to whatever color you input here, in this case #3e3e3e.

Onto the next section now. Now when we hover over the drop down menu list item, we need to actually make this functional using this code:

Code

/* Tag for the unordered link nested under the main list items */
li:hover ul {
    display: block; /* Allows drop down menu to properly function */
    position: absolute; /* Fixes menu items so they do not resize */
}

The display is block again, meaning that it takes up the whole space. This time, the position is absolute, meaning that it is positioned to its first parent element that has a position other than static.

Don't worry, we are getting very close! Once we have our drop down menu, we want some effects to actually make it drop down. To do so, we do this:

Code

li:hover li {
    font-size: 14px; /* Font size of drop down menu items */
    float: none; /* Aligns drop down menu into smooth format */
}

Once again, the font-size of the drop down items are 14 pixels in size. The float is set to none, meaning that there is no preference to the left or right, but aligns the list items properly.

Two more blocks of code to write! Now that we have a drop down menu that actually drops down, we want to add some color to the drop down menu so it matches our main navigation bar:

Code

/* Links of the drop down menu */
li:hover a {
    background: #3e3e3e; /* Background color of drop down menu */
}

As before with the main list items, the background color is set to #3e3e3e. This one is relatively straight forward.

Here is the final CSS modification! You finally made it! Once we have the drop down menu with a solid color, we need to add some code so once you hover over a drop down item, it actually changes color:

Code

/* Link hover of the list items of the drop down menu */
li:hover li a:hover {
    background: #f75731; /* Color of drop down menu items on mouse hover */
}

When we hover over the drop down menu list items, the item that is being hovered over will change to #f75731. That's it!

Final code all together:

Code

/* This applies to all unordered list tags */
ul {
    font-family: "Trebuchet MS", Helvetica, sans-serif; /* Font style */
    font-size: 14px; /* Navigation list item font size */
    padding: 0; /* Used for proper alignment */
}

/* The tag that is for the list items of unordered lists */
ul li {
    display: block;
    position: relative;
    float: left; /* Puts list items next to each other instead of on top of one another */
}

/* For the subitems */
li ul {
    display: none; /* Required for spacing and formatting */
}

/* Links of the list items */
ul li a {
    display: block; /* Properly aligns navigation bar's display */
    text-decoration: none; /* No underline under links */
    /* border-top: 1px solid #ffffff; */ /* Uncomment previous line if you want spacing between drop down items */
    padding: 5px 20px 5px 20px; /* Spaces out list items so they aren't compact */
    background: #fa7151; /* Background color of menu items */
    color: #ffffff; /* Font color */
    white-space: nowrap; /* Keeps drop down menu items on one line */
}

/* The tag used for the hovering on the list items */
ul li a:hover {
    background: #3e3e3e; /* Color of menu items on mouse hover */
}

/* Tag for the unordered link nested under the main list items */
li:hover ul {
    display: block; /* Allows drop down menu to properly function */
    position: absolute; /* Fixes menu items so they do not resize */
}

/* List items of the drop down menu */
li:hover li {
    font-size: 14px; /* Font size of drop down menu items */
    float: none; /* Aligns drop down menu into smooth format */
}

/* Links of the drop down menu */
li:hover a {
    background: #3e3e3e; /* Background color of drop down menu */
}

/* Link hover of the list items of the drop down menu */
li:hover li a:hover {
    background: #f75731; /* Color of drop down menu items on mouse hover */
}

I took the decency to comment on every line to help you understand what is actually happening in case you are curious or are formatting the navigation bar to suit your needs. Before you can see any of the effects of the CSS file on the actual navigation bar, we need to go back to the HTML file and add a piece of code so they coincide together. You need to add this line underneath the ‘title’ tag, but within the ‘head’ tag:

Code

<link rel="stylesheet" href="style.css" title="style1" media="screen" />

So your whole HTML code should look like:

Code

<!DOCTYPE html>
<html>

<head>
<title>
Navigation Bar
</title>
<link rel="stylesheet" href="style.css" title="style1" media="screen" />
</head>

<body>
<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a>
      <ul>
      <li><a href="#">6-Week Program</a></li>
      <li><a href="#">Supplementation</a></li>
      <li><a href="#">Diet/Nutrition</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

</body>
</html>

Just another note, make sure that the HTML file and the CSS file are in the same directory so they can actually connect.

Step 4. There is one part in the CSS file where I made a note saying you can remove a comment around a line of code to change the appearance of the drop down menu. The piece of code is:

Code

border-top: 1px solid #ffffff;

If you have that piece of code active, your drop down menu will look like this:


Otherwise, if you have it commented out, the drop down menu will change to this:


Choose which ever way you prefer. I personally like it with the code commented out, but of course, that’s just my opinion.

Conclusion:
And there you have it! This is a basic and simple way to make a drop down menu using HTML and CSS. There are many variations you can do to the drop down menu, different ways to make it responsive, and different effects. Just know it takes some time to fully master how to customize it, but this should give you a great starting point. Don't get discouraged even if you get frustrated at times. You can easily Google different ways to make a responsive navigation bar. Don't be afraid to learn and try out different methods! If you have any questions, please don't hesitate to ask!

Source download (HTML and CSS Files): Download Source Here

[brewery]

Good tutorial, hope this helps and inspires some new web designers in making a responsive and CSS powered designs.

[Cap]

Good tutorial, hope this helps and inspires some new web designers in making a responsive and CSS powered designs.

Thank you for the reply. I'm hoping it helps. I know I struggled with figuring out how to create a drop down menu when I first starting using CSS and HTML.

[Ventures]

Looks great. It took me around 4 hours to learn how to do my first dropdown menu. This should help out a lot.

[Kangaroo‎‎]

Great tutorial, I will definitely bookmark this for later :)

[Cap]

Thanks for the replies. I'm glad you found this tutorial useful. I'll keep making more web design tutorials as well.

[FacetheBass]

Thank you for this, will definitely help in my endeavors.

[Cap]

Thank you for this, will definitely help in my endeavors.

I'm glad I could assist. Let me know if you have any questions.

[jetkai]

Really good basic tutorial :)

Thanks flawless ^.^ I'm sure this will be really useful to many people on hackforums :)

[Cap]

Really good basic tutorial :)

Thanks flawless ^.^ I'm sure this will be really useful to many people on hackforums :)

Thank you for your kind words. Glad I could help!