i want make a drop down menu at which after click list will open rather mouse hover using CSS not using jquery, javascript etc

Question

i have made my own drop down menu but i want to make that condition to which after clicking mouse it'll show the list rather mouse hover showing so how to do it using CSS is there any property that can i use ?? and i don't want to use jquery or JS.

here is my source code:

<ul><li>Home</li>
  <li>About</li>
  <li>
    Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Contact</li>
</ul>


body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Answer 1

What you could do is check whether the ul li is active instead of checking for a hover. So what you could do is.

ul li ul li:active { background: #666; }
ul li:active ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Answer 2

Unfortunately, CSS doesn't have events like Javascript does. The closest thing you'll have to this is the :active state:

ul:active
{
    //stuff
}

However, this will only be applied while the user is holding the mouse button down on the element. It will not toggle anything.

You need some form of JS in order to do this properly.

Answer 3

My guess is that you can use z-index for that matter.

I would put the menu into a div and change the z-index of the div when the event you prefere is triggered (mouse over, on click, etc...)

Answer 4

There is no way to detect a click action in CSS alone. You will either have to use JS or settle for hovering to expand it. As mentioned in other answers, element:active will detect if the user is HOLDING THE MOUSE BUTTON DOWN on that element, but that seems... less desirable.