Vertical CSS Drop-Down Menu Tutorial
When designing a website, you can create a vertical drop-down menu using HTML and CSS. You need HTML to create the menu on a Web page, including how many menu options you need and how many drop-down values for each. You then need CSS to set the menu's appearance and format values. When a visitor hovers the mouse over one of the options on the menu, a drop-down list with more options appears to help the visitor navigate through your website.
Other People Are Reading
Instructions
-
HTML File
-
1
Open the HTML file in which you want to add a vertical drop-down menu. Type the following in the <head> element:
<link href="style.css" rel="stylesheet" type="text/css" />
Change the "href" value to the name of your CSS file, if needed.
-
2
Type the following in the <body> element:
<ul id="dropdown">
<li><a href="index.html">Home</a></li>
<li><a href="category1.html">Category 1</a>
<ul>
<li><a href="option1.html">Option 1</a></li>
<li><a href="option2.html">Option 2</a></li>
<li><a href="option3.html">Option 3</a></li>
</ul>
</li>
<li><a href="category2.html">Category 2</a>
<ul>
<li><a href="option1.html">Option 1</a></li>
<li><a href="option2.html">Option 2</a></li>
</ul>
</li>
</ul>
These lines create the HTML menu and drop-down lists. Add, modify and remove menu items as needed. Note that menu options that do not have drop-down lists, such as the "Home" option, do not use the <ul> tag, but the entire menu uses a <ul> tag and references an id called "dropdown" in the CSS file.
-
-
3
Save the HTML file.
CSS File
-
4
Open the CSS file. Type the following:
ul#dropdown {
list-style: none;
}
By default, unordered lists use bullet points beside text. This selector removes the bullet points for unordered lists that call the "dropdown" id, such as the one on the HTML file.
-
5
Type the following:
ul#dropdown li, ul#dropdown li ul li {
float: left;
width: 75px;
}
The "float" property aligns items in the menu horizontally. Remove this property if you want the menu to display items vertically in a list. The "width" property sets how wide each menu item is. Change this value as needed so that each item in the menu fits without any overlap.
-
6
Type the following:
li ul {
display: none;
position: absolute;
width:75px;
}
By default, the drop-down options show up on the screen. The "display" property in this selector hides them. The "position" property places them in a set position beneath the category.
-
7
Type the following:
li:hover ul, li.over ul {
display: block;
}
The "display" property here shows drop-down options when a visitor hovers the mouse over a category. When the mouse goes off of a menu category, the drop-down options disappear again.
-
8
Save the CSS file.
-
1
