How To Make A Dropdown Menu

Table of contents:

How To Make A Dropdown Menu
How To Make A Dropdown Menu

Video: How To Make A Dropdown Menu

Video: How To Make A Dropdown Menu
Video: How to Create an HTML Dropdown Menu | Learn HTML and CSS | HTML Tutorial | HTML for Beginners 2024, November
Anonim

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.

How to make a dropdown menu
How to make a dropdown menu

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

Recommended: