One of the most commonly used elements in websites is the navigation bar. The navigation bar houses the links to other pages on your site and makes it easier for people to view your content. In this tutorial I'll be showing you how to make a basic drop-down navigation bar using HTML and CSS.
You can also download the full source code here.
To start off create a file named index.html and copy the following code into it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Drop-Down Menu</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
</body>
</html>
This is a pretty basic empty html page. It declares the doctype, as well as setting the character encoding to UTF-8. You don't need to worry about either of these lines yet, but when building production sites they're important for telling the browser how to interpret your code.
What you do need to worry about is this line:
<link rel="stylesheet" type="text/CSS" href="style.CSS"/>
This line links to a stylesheet to tell the browser how to format your html. This is where your CSS rules are housed and it's an integral part of this tutorial. Currently it's linking to a file that doesn't exist so create an empty file called style.css and save it in the same folder as index.html. We'll leave style.css blank for now but leave it open as we'll be coming back to it.
Now it's time to start building the navigation bar in index.html. Let's say for the purposes of this exercise that we have 4 main links: 'Home,' 'About,' 'Services,' and 'Contact.' Let's also say that under 'Services' we have a few subcategories: 'Web Design,' 'Web Development,' and 'Graphic Design.'
We'll start off by creating an unordered list to house the main four links. The html tag for an unordered list is <ul>, and the tag for a list item is <li>.
From now on, light grey text represents code you've already added. Add the black code section below between your <body> tags to begin building your list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS Drop-Down Menu </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<ul>
<li>
<ul>
<a href="#">
<li>
Home
</li>
</a>
</ul>
</li>
<li>
<ul>
<a href="#">
<li>
About
</li>
</a>
</ul>
</li>
<li>
<ul>
<a href="#">
<li>
Service
</li>
</a>
</ul>
</li>
<li>
<ul>
<a href="#">
<li>
Contact
</li>
</a>
</ul>
</li>
</ul>
</body>
</html>
This might look overwhelming at first but it's actually pretty simple. You have 1 main unordered list (<ul>) which houses a number of list items (<li>). Inside each list item is another unordered list which will house your main links as well as any subcategories. So far your page should look like this:
Now let's add the subcategories to the Services section. Again, add the dark section to your code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Drop-Down Me oldnu</title>
<link rel="stylesheet" type="text/CSS" href="style.CSS"/>
</head>
<body>
<ul>
<li>
<ul>
<a href="#">
<li>
Home
</li>
</a>
</ul>
</li>
<li>
<ul>
<a href="#">
<li>
About
</li>
</a>
</ul>
</li>
<li>
<ul>
<a href="#">
<li>
Services
</li>
</a>
<a href="#">
<li>
Web Design
</li>
</a>
<a href="#">
<li>
Web Development
</li>
</a>
<a href="#">
<li>
Graphic Design
</li>
</a>
</ul>
</li>
<li>
<ul>
<a href="#">
<li>
Contact
</li>
</a>
</ul>
</li>
</ul>
</body>
</html>
We're just adding more items to the Services list. Each of these items is wrapped in an <a> tag, but they won't work as links yet because the link's 'href' links to "#" which returns you to the same page. Now your page should look like this:
That's all the html we'll have to write for this menu, so save your index.html file and go back to style.css.
First, let's get rid of unnecessary bullet points and underlining. Paste the following rules in to your CSS file:
a{
text-decoration:none;
color:#000000;
}
ul{
list-style: none;
padding:0px;
}
This removes unnecessary styling from your links (a), as well as your unordered lists(ul). This also changes the text color of links to black (#000000) instead of the blue link color.
Alright, now we're going start formatting the lists. In order to do this we'll need to use 'nested selectors.' A nested selector looks like this:
ul li{
}
This targets any <li> tags inside of <ul> tags. Here's another example:
ul li ul{
}
This targets any <ul> tags that are inside <li> tags that are inside <ul> tags. There are two other CSS terms we'll need to make this work. Both of these are 'pseudo-selectors.' Here's an example of the pseudo-selector ':hover.'
li:hover{
}
This example targets <li>s that the mouse is hovered over. Pseudo-selectors specify which of a tag is being targetted. They always follow CSS selectors with a and begin with a ':'. Hover is one of the two pseudo-selectors we're using. Here's the other:
li:first-child{
}
First-child refers to the first element inside of the targetted tag. The browser goes through each <li> tag and styles the first child of each. The first child just means the first tagged element inside of the parent. You could also specify the first child of a certain tag. For example:
li:first-child a{
}
That example code targets the first <a> tag inside each <li> tag.
Alright, get ready. We're about to add a big chunk of CSS all at once using both nested selectors and pseudo-selectors. Don't worry. I'll go back and explain what we're doing here afterwards. Add the black code to the end of your CSS file:
a{
text-decoration:none;
color:#000000;
}
ul{
list-style: none;
padding:0px;
}
ul li{
float:left;
width:25%;
}
ul li ul li{
background:#4898B6
width:100%;
border:1px solid #ffffff
padding:20px;
text-align:center
display:none;
}
ul li ul a:first-child li{
display:block;
}
ul li ul:hover li{
display:block;
}
ul li ul li:hover{
background:#50A9C9;
}
Now your page should match the demo with the list of services dropping down when you hover over the Services tab.
You can also download the full source code here.
So what's going on in that big CSS block? Let's break it down:
ul li{
float:left;
width:25%;
}
The selector 'ul li' targets the list items in the main list (Home, About, etc.) 'float:left;' positions them horizontally in relation to eachother instead of vertically. 'width:25%' makes each item take up 1/4 of the available space. Since we have 4 main categories this fills up the nav bar.
This would be all we needed if we didn't need the menu options to drop down. Since we do need a drop-down menu let's keep going.
ul li ul li{
background:#4898B6
width:100%;
border:1px solid #ffffff
padding:20px;
text-align:center
display:none;
}
The selector 'ul li ul li' styles the list items in our nested lists. These <li>s include our main links like 'Services', as well as subcategories like 'Web Design.' The first 5 lines are just styling the <li>s to be more attractive. The final rule, 'display:none;', hides our drop-down subcategories, but it also hides our main links. To restore our main links we included the following:
ul li ul a:first-child li{
display:block;
}
This section uses the pseudo-selector ':first-child' to find the first item in each nested list and display it again. We're basically telling the browser, "I know we're hiding all nested <li>s, but make an exception for the first child of each list." This restored our main links, but our drop-downs still aren't being activated on hover. That's why we included this next chunk of CSS:
ul li ul:hover li{
display:block;
}
This section uses ':hover' to show the subcategories that we hid before. When 'ul li ul' is hovered over by the mouse, all 'li' that are nested in that list are displayed regularly again.
ul li ul li:hover{
background:#50A9C9;
}
This final section styles nested 'li's when you hover over them. It's not necessary for a drop-down but it makes the menu feel more interactive.