DEV Community

Cover image for Create Drop-Down Menus with Plain CSS
Mohammad S
Mohammad S

Posted on

Create Drop-Down Menus with Plain CSS

#css #html #codenewbie #dropdown

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

Creating the HTML Part

Breaking down the components:

Alt Text

Now we can move along to create the HTML elements.

      <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>
Enter fullscreen mode Exit fullscreen mode

Adding the CSS:

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

      /* <nav> element */
      #nav-element {
        position: relative;
        display: inline-block; 
      }
Enter fullscreen mode Exit fullscreen mode

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.

      /* <button> element */
      #button-dropdown {
        width: 10rem;
        margin: auto;
        padding: 0.5rem 0rem;
        background-color: #3b70ff;
        color: white;
        border: 1px solid #3b70ff;
      }
Enter fullscreen mode Exit fullscreen mode

Adding CSS to "div" tag.

      /* <div> element */
      #div-products {
        display: none;
        width: 10rem;
        margin: auto;
        color: #3b70ff;
        border: 1px solid #3b70ff;
      }
Enter fullscreen mode Exit fullscreen mode

Note: When creating these components initially, set "display: block", else you will not be able to see the output.

Adding CSS to "a" tag.

      /* <a> element */
      #div-products a {
        display: block;
        text-decoration: none;
        padding: 0.5rem 0rem;
      }
Enter fullscreen mode Exit fullscreen mode

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.

      #nav-element:hover #div-products {
        display: block;
      }
Enter fullscreen mode Exit fullscreen mode

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.

      #div-products a:hover {
        background-color: #3b70ff;
        color: white;
      }
Enter fullscreen mode Exit fullscreen mode

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 and LinkedIn.

Top comments (8)

Collapse
 
alvaromontoro profile image
Alvaro Montoro • • Edited

It looks nice. Do you have a link to a demo?

Edit: a problem with the menu is that it is not keyboard-friendly. It only works on hover, so keyboard users cannot open the menu. A possible solution for it would be to open the menu when the focus is within the navigation (adding one line of code):

#nav-element:focus-within  #div-products, /* <-- new line */
#nav-element:hover  #div-products {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

That way the menu will be keyboard accessible too. Maybe not the best user experience, but at least it would be reachable.

Collapse
 
themohammadsa profile image
Mohammad S •

Here's a link to the live demo: 71cqf.csb.app/
(just added it in the blog too)

Oh, yes.. darn! I forgot about the keyboard accessibility part, Thank You for sharing it. :)

Collapse
 
salex profile image
Steve Alex •

Would work fine in a side bar, but in a top bar it pushes everything down. Kind of distracting if used in wrong place. I tried z-index, but never had much luck with z-index.
Still it works fine

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
nikolab profile image
Nikola Betica •

Details tag is not a correct semantic tag to use for navigation. You should always use nav tag. Also, in case of multi-level navigation details would not work correctly.

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
nikolab profile image
Nikola Betica • • Edited

It's a proof it works - sometimes. "Dropdown effect" is not the core behaviour of the details tag, it's a browser behaviour. Meaning - you don't have a control of how the browser will display that dropdown. Also, let's say you have a dropdown but you want the text that opens a dropdown also to be a link. a tag will not work in summary tag, neither will it expand the content.

So, can you use it? Yes. Should you use it? No. Simply, there are better ways to do it.

Collapse
 
themohammadsa profile image
Mohammad S •

Wow! I didn't know about this until now. Thanks a ton, for sharing.

Read next

nataliafdev profile image

CSS Art: Space - UFO animation

Natália F. Dev -

kaja_uvais_a8691e947dd399 profile image

Team Section using HTML and CSS

Kaja Uvais -

alvaromontoro profile image

Sunrise in Space (Quiet)

Alvaro Montoro -

jarvisscript profile image

Frontend Challenge: Space Trucking.

Chris Jarvis -