Learn CSS

"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."

CSS Dropdowns

Dropdown menus are a common feature of websites, and they allow users to select options from a list that is hidden until the user clicks on a button or link. In this chapter, we will discuss how to create a simple CSS dropdown menu.

 

HTML Markup

Let's start by creating the HTML markup for our dropdown menu. We will use an unordered list (<ul>) to create the list of links. Each link will be a list item (<li>) inside the <ul> element. We will add a sub-menu inside the list item that we want to have a dropdown. Here's the HTML code:


<nav>
 <ul>
   <li><a href="#">Home</a></li>
   <li>
     <a href="#">Products</a>
     <ul>
       <li><a href="#">Product 1</a></li>
       <li><a href="#">Product 2</a></li>
       <li><a href="#">Product 3</a></li>
     </ul>
   </li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
 </ul>
</nav>

 

CSS Styling

Now let's style our dropdown menu using CSS. We will set the background color, font size, font family, and other properties for the navbar and its links. Here's the CSS code:


nav {
 background-color: #333;
 font-size: 18px;
 font-family: Arial, sans-serif;
}
nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
}
nav li {
 margin: 0 10px;
 position: relative;
}
nav a {
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 10px;
}
nav ul ul {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 background-color: #333;
}
nav ul li:hover > ul {
 display: block;
}
nav a:hover {
 background-color: #555;
}

 

Explanation

  • nav selector sets the background color, font size, and font family of the navbar.
  • nav ul selector sets the list style to none, removes the margin and padding, and displays the list items horizontally using display: flex.
  • nav li selector sets the margin between list items and makes the position of each list item relative.
  • nav a selector styles the links by setting their color, padding, and removing the underline using text-decoration: none.
  • nav ul ul selector sets the dropdown sub-menu to display none and positions it absolutely below the list item.
  • nav ul li:hover > ul selector displays the sub-menu when the user hovers over the list item that contains the dropdown.
  • nav a:hover selector styles the links when the mouse hovers over them by changing the background color.
     

In this chapter, we learned how to create a simple CSS dropdown menu using HTML and CSS. By using the ul and li elements, we created a list of links and a sub-menu that is hidden until the user hovers over the list item. We also learned how to position the sub-menu below the list item using the position property. With a few more styling tweaks, you can create a beautiful dropdown menu for your website.