The CSS Style

However, we want only the top-level elements to appear on one line, and when the cursor is hovered over those items, the nested list items should appear in the form of a drop-down menu. This will be done via CSS.

Create a new CSS file named “style.css” and place it in the same directory where the HTML, created in the initial steps, is placed.

Add the markup, shown below, to the CSS file. The markup has been explained under each code snippet.

Step 4:

ul{ padding: 0; margin: 0; list-style-type: none; }

This above markup will remove padding and margin from all unordered list from the HTML code.

Step 5:

ul#menu li{ background: #47a3da; float: left; }

The above markup says that go to the unordered list with ID “menu” and style its list items such that the background color becomes blue and floats all lists items to left.

This will arrange all top-level elements in the same line. It also removes the bullets from the list.

Step 6:

ul#menu li a{ color: #000000; display: block; padding: 10px 25px; text-decoration: none; border-bottom: 2px solid #000000; }

The above code says that, go to the unordered list with ID “menu,” style all the links inside the list elements, change the color to black, alter the display style to block, and add top and bottom padding of 10px while right and left padding to 25px.

Next, text-decoration has been set to none, which will remove the link’s underline.

Finally, the bottom border has been styled.

Step 7:

ul#menu li a:hover{ background: #72caff; }

This markup will change the color of the links when the cursor is hovered over the top level list items.

Step 8:

ul#menu li ul li{ float: none; }

The above mentioned code snippet says that do not float the list items of the internal unordered list.

ul#menu li ul{ position: absolute; display: none; }

The aforementioned markup will hide the internal unordered list and will set its position to absolute.

ul{ padding: 0; margin: 0; list-style-type: none;

Finally, the above markup will make the internal unordered list items appear when the cursor is hovered over one of the top-level list items.

Now if you add the link of this CSS file to the HTML file that you created in the first three steps and then refresh the page, you should be able to see your drop-down menu.