Implement a simple dropdown menu only with CSS

Question

I've been practicing CSS for a while ago and trying to implement a simple drop-down menu without using either bootstrap or jQuery.

The problem is, I cannot fully mimic the drop-down menu looks like the following image below.

Expecting Result

Current Result

<div id="menu">
  <a href="#" class="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </a>
  <ul id="dropdown-menu">
    <li class="dropdown-item">
      <a href="#about">About</a>
    </li>
    <li class="dropdown-item">
      <a href="#travel">Travel</a>
    </li>
    <li class="dropdown-item">
      <a href="#food">Food</a>
    </li>
  </ul>
</div>

Please check out the fiddle to see styling

Is there a reason why you want to use purely CSS? Why not some Javascript or Jquery? — Robert Dickey
– Robert Dickey, Commented Mar 26, 2018 at 17:25
@RobertDickey No, there isn't any particular reason. I thought I could mimic the menu right away by only using CSS. Is usage of JavaScript mandatory for this case? — JeffMinsungKim
– JeffMinsungKim, Commented Mar 26, 2018 at 17:34
Is the :hover psuedo-class that displays the actual menu going to work on mobile? — hypern00b
– hypern00b, Commented Mar 26, 2018 at 17:39
What is your exact problem? The styling of the three-dash-menu item? — andreas
– andreas, Commented Mar 26, 2018 at 17:54
If your "question" is "I can't style it as I want", you're simply a client asking for free programming services and your question is off-topic on Stack Overflow. If your question is in the form of: "this property does this according to specs, but in my case it does the other", you're a programmer learning and your question is on-topic here, as it will help others learn/understand what wasn't clear for you as well. — tao
– tao, Commented Mar 26, 2018 at 18:02

Steve K · Accepted Answer · 2018-03-26 18:12:03Z

1

So there were quite a few inaccuracies in your fiddle demo so I figured I would just rewrite this to look like your desired result and then you could go from there. The theory behind a css dropdown menu is that the containing element will be have a certain position (in this case I have positioned it to relative) and the dropdown menu will have a position of absolute inside the containing element and a display of none. Then when you hover on the containing element the dropdown will have a display of block so here is a working example of what you are trying to achieve.

#menu{
  position:relative;
  display:inline-block;
  /*font size 0 removes white space from inline block elements add font size to  the dropdown menu*/
  font-size:0;
}
#menu .menu-toggle {
  padding: 10px;
  background: rgba(255,255,255,0.9);
  border:1px solid rgb(220,220,220);
  display:inline-block;
}
#menu .menu-toggle span{
  display:block;
  margin: 3px 0px;
  width: 18px;
  height: 3px;
  background: #33333D;
}

#dropdown-menu{
  display:none;
  list-style-type:none;
  margin:0;
  padding:0;
  position:absolute;
  top:100%;
  left:0;
  border:1px solid rgb(220,220,220);
  font-size:16px;
}
#menu:hover #dropdown-menu{
  display:block;
}
#dropdown-menu li a{
  display:block;
  padding:5px 15px;
  color:inherit;
  text-decoration:none;
}

<div id="menu">
    <a class="menu-toggle">
      <span></span>
      <span></span>
      <span></span>
    </a>
    <ul id="dropdown-menu">
      <li class="dropdown-item">
        <a href="#about">About</a>
      </li>
      <li class="dropdown-item">
        <a href="#travel">Travel</a>
      </li>
      <li class="dropdown-item">
        <a href="#food">Food</a>
      </li>
    </ul>
  </div>

edited Mar 26, 2018 at 18:12

answered Mar 26, 2018 at 18:02

Steve K

9,1353 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anders Over a year ago

Beat me to it :) I would just add you can achieve the border effect in the OP's original image by overlapping an opaque toggle button with the top of the border of the dropdown. Something like this: jsfiddle

JeffMinsungKim Over a year ago

Thank you, Steve. It helped me a lot!

JeffMinsungKim Over a year ago

@Anders I like your way but it seems like the dropdown has some losing focus issue from time to time when I hover the toggle.

Anders Over a year ago

@JeffMinsungKim Whoops missed that, updated the fiddle :)

Nasir Husain · Accepted Answer · 2018-03-26 20:27:03Z

<div class="menu-area">
  <div id="menu">
  <a href="#" class="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </a>
  <ul id="dropdown-menu">
    <li class="dropdown-item">
     <a href="#about">About</a>
    </li>
    <li class="dropdown-item">
      <a href="#travel">Travel</a>
    </li>
    <li class="dropdown-item">
      <a href="#food">Food</a>
    </li>
  </ul>
  </div>
</div>



.menu-area {
   width: 220px;
   position: relative;
   text-align: right;
}
#menu {
    display: inline-block;
}
a.menu-toggle {
    width: 30px;
    height: 30px;
    padding: 5px 10px;
    display: inline-block;
    border: 1px solid #ddd;
    z-index: 9;
    background: #fff;
    position: relative;
    transition: .3s;
}
#menu:hover a.menu-toggle {
    border-bottom: 0;
}
a.menu-toggle span {
    height: 3px;
    display: block;
    margin-top: 5px;
    background: #555;
}
ul#dropdown-menu {
    position: absolute;
    top: 50px;
    width: 218px;
    transition: .3s;
    opacity: 0;
    visibility: hidden;
    padding: 20px 0px;
    border: 1px solid #ddd;
    margin: 0;
    text-align: left;
    left: 0;
}
#menu:hover ul#dropdown-menu {
    top: 40px;
    opacity: 1;
    visibility: visible;
}

ul#dropdown-menu li {
    margin: 0;
    padding: 5px 30px;
    display: block;
}
ul#dropdown-menu li a {
    display: inline-block;
    transition: .3s;
    color: #333;
    text-decoration: none;
    font-size: 18px;
}
ul#dropdown-menu li a:hover {
    color: #666;
}

Collectives™ on Stack Overflow

Implement a simple dropdown menu only with CSS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related