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.
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”.
If we refresh the page, you will see the links now sit horizontally.
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.
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.
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.
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.
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.
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.
Save and refresh the page.
The next step is to add borders to our link.
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.
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.
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 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.
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.
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.
To retain the background color for the parent link we need to make some changes to our background-color 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.
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
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.
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.
Summary
In this article we saw how to create a dropdown navigation menu using Cascading Style Sheets.
Thank you.