Pure CSS horizontal drop menu, show in click instead of hover

Question

Is it possible with pure CSS? That instead of showing a dropdown when I hover over "Test", show it when I click on "Test".

Also keep the yellow link color on "Test" when I have that dropdown open.

My current CSS

nav { 
text-transform: uppercase;
text-align: center;
margin-bottom: 20px;
}

nav ul {
list-style: none;
}

nav ul li {
display: inline-block;
text-align: left;
}

nav a {
display:block;
padding:0 20px;
transition: color .2s;
color: black;
font-size: 16px;
font-weight: 600;
line-height: 40px;
text-decoration: none;
}

nav ul ul li a { color: #FFFF64; }
nav ul ul li a:hover { color: #99A7EE; }
nav a:hover { color: #FFFF64; }
nav ul ul { display: none; position: absolute; }
nav ul li:hover > ul { display: inherit; }
nav ul ul li { background: #000; display: list-item; position: relative; }
nav ul ul li:hover { background: #333; }

http://jsfiddle.net/hn93jyvc/

You can, you just need to use the form's check box to control the on/off state of your drop down menu. It's a really hacked way of doing it and I don't recommend it. — mattdevio, Dec 08 '15 at 15:34
There was a very good answer to this on a recent thread: [http://stackoverflow.com/questions/33822189/how-do-i-make-my-menu-appear-on-click-with-css/33822327#33822327](http://stackoverflow.com/questions/33822189/how-do-i-make-my-menu-appear-on-click-with-css/33822327#33822327) — David Wilkinson, Dec 08 '15 at 15:45

score 2 · Answer 1 · edited May 23 '17 at 10:34

You can change :hover to :active like this: http://jsfiddle.net/hn93jyvc/1/

nav ul ul li a { color: #FFFF64; }
nav ul ul li a:active { color: #99A7EE; }
nav a:active { color: #FFFF64; }
nav ul ul { display: none; position: absolute; }
nav ul li:active ul { display: inherit; }
nav ul ul li { background: #000; display: list-item; position: relative; }
nav ul ul li:active { background: #333; }

However, this will not keep state and will only work on mouse down, once you release the mouse button, the menu will disappear.

As far as I know here, you would have to use a bit of javascript to attach active to this element until another click, or the desired logic.

You can see how achieve that from this answer: https://stackoverflow.com/a/20343068/5242026

Albeit, that answer uses jQuery, you could just as well make use of Javascript click event: https://developer.mozilla.org/en/docs/Web/Events/click which makes more sense if there are no other usages for jQuery.

mattdevio · Answer 2 · 2015-12-08T16:09:17.137

Like i said in my comment. This can be done using the checkbox combined with css pseudo ':checked' selector.

HTML

<ul>
  <li>Home</li>
  <li><label for="dd">Services</label>
    <input type="checkbox" id="dd" hidden>
       <ul class="dropdown">
         <li>clean</li>
         <li>fix</li>
         <li>paint</li>
       </ul>
  </li>
  <li>contact</li>
</ul>

CSS

ul{
  background: blue;
  display:block;
  list-style-type: none;
  text-align:center;        
}
ul li{
  display: inline-block;
  color: white;
  font-family: sans-serif;
  font-weight: 800;
  font-size: 20px;
  padding: 10px 15px;;
  position:relative;
  // keep users from highlighting text if they click it on/off too fast
  -webkit-user-select: none;
 -moz-user-select: none;    
 -ms-user-select: none;  
 user-select: none;
}
ul li:hover{
  background: #f9a1c6;
  color: #000;
}
ul li .dropdown{
  display:none;
  width: 200px;
  padding:0; margin:0;
  background: green;
  position: absolute;
  top: 45px;
  left:0;
}
ul li .dropdown li{
  width:100%;
  display:block;
  padding:10px 0px; margin:0px;
}
#dd:checked ~ .dropdown{
  display:block;
}

jsfiddle

Pure CSS horizontal drop menu, show in click instead of hover

2 Answers2