Post
Ask Question

How to Create a Dropdown Navigation Menu Using Cascading Style Sheet

Introduction

In this article we will learn how to create a dropdown navigation menu using a Cascading Style Sheet. So let's dive right in.

The first thing we need to do is to create a simple HTML file in which there will be a div tag with an id “nav”. Inside this div tag, we will create an unordered list using ul in which we will create some list items using li and inside these list items we will create a hyperlink.

<html>
<head>
    <title>Dropdown Navigation Menu</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">What's new</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</body>
</html>

The preceding HTML structure will look like this.

HTML structure

Before adding the second layer of the unordered list in any of the preceding links let's first understand the CSS required to create a basic horizontal navigation menu.

To make the links displayed horizontally we can use the float property and set the value to left and we will also want to remove all the list styles. For that, we can use the list-style property and assign the value “none”.

none

If we refresh the page, you will see the links now sit horizontally.

Refresh

However, links can use a bit of horizontal spacing. So, let's create a new rule in our CSS file and add some padding.

Horizontal Spacing

The first padding (of 7px) is the vertical padding and the second padding (of 15px) is the horizontal padding.

We set the display property to block.

To learn more about display blocks click here.

Refresh the page.

Refresh the page

The links are now spaced out a bit which is great.

Now the next step is to add the second layer of links and we will add this to the "What's new" link list item. Just after the </a> closing anchor tag, create a new unordered list and inside it create a list item and inside those list items add hyperlinks.

<li>
    <a href="#">What's new</a>
    <ul>
        <li><a href="#">List Item One</a></li>
        <li><a href="#">List Item One</a></li>
        <li><a href="#">List Item One</a></li>
        <li><a href="#">List Item One</a></li>
        <li><a href="#">List Item One</a></li>
    </ul>
</li>

Save the HTML file and refresh the page.

HTML

Currently our page looks very chaotic and the first thing we need to do is to hide all the list item links and it will only be displayed when we hover the mouse on the "What's new" link.

So, we need to create another rule in our CSS file that will hide the newly added links.

CSS

The preceding rule states that inside the #nav “div”, look for an unordered list “ul” and inside that unordered list look for another unordered list “ul” to which we are assigning the properties.

Position: absolute

The absolute value for the position property is used to place any of the page elements exactly where you want it.

Left : -9999px

This property's big negative value is used to hide any elements you want to.

Negative

The next step is to create a rule with which, when we hover the mouse on the "What's new" link, it will display the dropdown contents.

Dropdown

The preceding rule states that inside the nav find an unordered list. If we hover on any of the top-level links or list items (li) then select any unordered list inside of that only if we are hovering.

Inside this rule, set the left property to auto to display the child links.

Left Property

Save and refresh the page.

Save and refresh the page

Hover the mouse over the "What's new" link.

Mouse over

Currently, they are not positioned where we want to. But by writing a few lines of code we have our hover functionality.

The next step is to remove some extra spacing from the top unordered list and we want our child links to sit vertically.

To remove the extra spacing from the top unordered list, we need to create a new rule.

Spacing

The preceding rule will shift the top links to the left side a bit.

Left side

We will create another rule that will align and display the child links vertically and for that all we need to do is to assign none to the float property.

Float property

Save and refresh the page.

Save and refresh the page

The next thing to do is to remove the underline from the links and we will also change the link color from Blue to dark Grey and the background color to light Grey.

Background

Save and refresh the page.

Page

The next step is to add borders to our link.

Borders

Refresh the page.

Refresh the page

But we don't want the border in the last link and for that, we can provide the last link the class of “borderless” in our HTML file.

Borderless

In the CSS file, we will create a new rule that will hide the border from the last link.

CSS file

The preceding rule states, look for a list item with a class named “borderless” (li.borderless) that contains a hyperlink and remove the border style from that hyperlink.

Refresh the page and you will see that the border is now removed.

Border Removed

When we hover over the "What's new" link, the child link also receives the border-right.

Child link

But we don't want any borders in the child links. So, let's see how to remove it.

Remove

The preceding rule indicates to find a child unordered list inside a parent's unordered list's list item in which find is a list item that contains a hyperlink and remove the border from it.

Refresh the page.

Remove the border

So, the borders are now removed.

The next thing to do is to change the background color of the top links whenever we hover the mouse over any of the links and for that we need to create a new rule.

Create a new rule

The preceding rule means that in the #nav find an unordered list in which there is a list item that contains hyperlinks. Whenever we hover the mouse over any of the links, change the background color to White.

Refresh the page.

Mouse Hover

But when we hover over the child links in the "What's new" link, the parent link, in other words, the "What's new" link, loses the White background color.

Background color

To retain the background color for the parent link we need to make some changes to our background-color rule.

colour rule

The preceding rule states that whenever a hyperlink hovers or whenever a list item is hovered over then all the hyperlinks present in that list item's background color should be changed to White including the top list items and links.

Items

But in the output, we have all the child links background color shown as White.

To overcome this problem we need to create two new rules.

First rule

First rule

The preceding rule states that whenever we hover the mouse on any of the list items then all the child hyperlinks present in the child unordered list item's background color should change to light Grey.

Unordered list

Second rule

Second rule

The preceding rule states that whenever a list item is hovered then inside those list items if there is any child unordered list that contains a list item that contains hyperlinks and if those links are hovered over then change the child links background color to White.

White

Summary

In this article we saw how to create a dropdown navigation menu using Cascading Style Sheets.

Thank you.


Similar Articles