A nice dropdown menu can be created not only in JavaScript, but also using standard HTML tags. This method of creating a drop-down menu will be useful for those who are just starting their first steps in creating websites and want to simplify the work of creating menus on pages.
Instructions
Step 1
In HTML code, such a menu is an unordered list with nested lists inside. To get started, create a style.css file and copy the following CSS code there to style and format the menu:
#nav, #nav ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid # 000;
background: # 515151;
float: left;
width: 100%;
}
#nav li {
float: left;
position: relative;
background-color: # 003366;
back / ground: none;
}
#nav li ul {
display: none;
position: absolute;
background-color: # 003366;
padding: 8px 0;
width: 138px;
}
Step 2
Now we need to add some decoration to the menu items. Define the width and height for them, remove the underline lines, set a clear width for each link, and specify the desired background colors.
Step 3
For all these changes, add the following code to the file:
#nav a {
color: #fff;
text-decoration: none;
display: block;
width: 120px;
padding: 4px 10px;
background-color: # 003366 repeat-y right;
}
#nav a: hover {
color: # 000;
background-color: # 0033FF;
}
#nav li: hover {
background-color: # 333333;
}
Then add the following piece of code to finalize the menu:
#nav li: hover li ul {
display: none;
width: 138px;
top: -9px;
left: 133px;
}
#nav li: hover li: hover ul {
display: block;
}
Step 4
In the HTML version, the general unordered menu list looks like this - on its basis, the menu is created, which was mentioned in the article.
- Home
-
Catalog
-
All products
- By date
- Manufacturers
- Other
-
