How to Create a Dropdown Navigation Menu Using Cascading Style Sheet

Harpreet Singh
9y
45.9k
0
0

Article

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.

menu

Before adding the second layer of 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.

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.

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.

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.

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.

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

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.

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

Save and refresh the page.

Refresh the page again

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

Save and refresh the page.

page

The next step is to add borders to our link.

borders

Refresh the page.

reload 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.

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

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.

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

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.

So, the borders are now removed.

The next thing to do is to change the background colour of the top links whenever we hover the mouse over any of the links and for that we need to 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 colour to White.

Refresh the page.

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, looses the White background colour.

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

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

items

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

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

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 colour should change to light Grey.

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 colour to White.

white