Create Drop-Down Menus with Plain CSS
Tags: css, html, codenewbie, dropdown
Published: 2021-03-02 05:00:33

Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t.

I have tried my level-best to keep the code as short & simple as possible. This is built with **plain CSS and HTML** only. I have not used any library.

Before we begin, let me show you a glimpse of what we are going to create. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl95nbmdqm30pzyaj99t.gif)


### Creating the HTML Part

Breaking down the components:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fg5038a40u27ld7jvivg.png)

Now we can move along to create the HTML elements.

```javascript
      <nav id="nav-element"> 
        <button id="button-dropdown">Dropdown </button>
        <div id="div-products">
          <a href="">Product 1 </a>
          <a href="">Product 2 </a>
          <a href="">Product 3 </a>
          <a href="">Product 4 </a>
          <a href="">Product 5 </a>
        </div>
      </nav>
```

### Adding the CSS:

**Let us first add CSS to the "nav" tag.**

```javascript
      /* <nav> element */
      #nav-element {
        position: relative;
        display: inline-block; 
      }
```
Note: In display, Use inline-block as only when we hover in-line, the drop-down appears. Do not use block element, as then the drop-down will appear when we hover around the block.

**Adding CSS to the "button" tag.**

```javascript
      /* <button> element */
      #button-dropdown {
        width: 10rem;
        margin: auto;
        padding: 0.5rem 0rem;
        background-color: #3b70ff;
        color: white;
        border: 1px solid #3b70ff;
      }
```
**Adding CSS to "div" tag.**

```javascript
      /* <div> element */
      #div-products {
        display: none;
        width: 10rem;
        margin: auto;
        color: #3b70ff;
        border: 1px solid #3b70ff;
      }
```
Note: When creating these components initially, set "display: block", else you will not be able to see the output.

**Adding CSS to "a" tag.**

```javascript
      /* <a> element */
      #div-products a {
        display: block;
        text-decoration: none;
        padding: 0.5rem 0rem;
      }
```
Note: We use "block" as "a" tag is an in-line element ie. the output of all the "a" tags are in the same line.


Hurray! Now you are 95% done with the work. All that is remaining is the hover features. Let us get right into it! 

### Adding the hover feature:

When we hover over the "nav" element, the display of "div" tag should appear ie. drop-down menu should appear.

```javascript
      #nav-element:hover #div-products {
        display: block;
      }
```

**Another feature:**

When we hover over the "a" elements ie. Product 1, Product 2, etc., we want a change in background color & color of the text.

```javascript
      #div-products a:hover {
        background-color: #3b70ff;
        color: white;
      }
```


Aaaanddd, we are done. Do try the code and let me know if you found it useful. 

**Here's a link to the live demo:** https://71cqf.csb.app/ 


**Disclaimer:** This is my first blog into the tech space. I am a complete newbie into the web dev world, so if I haven't practiced the best-practices - do let me know & I'll be more than glad to correct myself. :D


I document my journey and experiences on [Twitter](https://twitter.com/themohammadsa) and [LinkedIn](https://www.linkedin.com/in/themohammadsa/).