HTML/ CSS/ DropDown onClick alteration

Question

I am a student worker, I'm working off an idea, I have found an open source drop down menu that I would like to alter.

I would like to alter it so that instead of showing its children when it is hovered over, it shows them when clicked. Is this possible? Or does anyone know of a similar solution that is open source?

Here is the code: Too many lines to post the HTML so here is the URL http://notimefortime.com/index.txt

#menuh-container
{
        position: absolute;     
        top: 1em;
        left: 1em;
}

#menuh
{
    font-size: 10px;
    font-family: arial, helvetica, sans-serif;
    width:100%;
    float:left;
    margin:2em;
        margin-top: 1em;
}

#menuh a
{
    text-align: center;
    display:block;
    border: 1px solid #0040FF;
    white-space:nowrap;
    margin:0;
    padding: 0.3em;
}

#menuh a:link, #menuh a:visited, #menuh a:active    
{
    color: white;
    background-color: #0040FF;      
    text-decoration:none;
}

#menuh a:hover                      
{
color: white;
background-color: #668CFF;  
text-decoration:none;
}   

#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all    top-parents */
{
    background-image: url(navdown_white.gif);
    background-position: right center;
    background-repeat: no-repeat;
 }

#menuh a.parent, #menuh a.parent:hover  /* attaches side-arrow to all parents */
{
    background-image: url(nav_white.gif);
    background-position: right center;
   background-repeat: no-repeat;
}

#menuh ul
{
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    width:20em; 
}

#menuh li
{
    position:relative;
    min-height: 1px;        
    vertical-align: bottom;     
}

#menuh ul ul
{
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
    top:0;
    left:100%;
}

div#menuh li:hover
{
    cursor:pointer;
    z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{
    display:none;
}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{
    display:block;
 }

Answer 1

No.

You're currently using the CSS :hover pseudo selector which displays the child when the parent is hovered over. There's a pseudo selector :active which is only triggered if you're holding down the mouse button on an element, but that's obviously not what you want.

For the menu to appear on click, you'll need JavaScript. However, in case a user is browsing with Javascript off, you'll want to revert to the CSS hover technique. So, start with some basic HTML/CSS, similar to what you have:

HTML:

  <ul id="menu">
    <li>
        Some Link
        <ul>
          <li>A</li>
          <li>B</li>
        </ul>
    </li>
    <li>
        Some Link 2
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
    </li>
  </ul>

CSS:

 #menu li ul {
    display:none; 
  }
  #menu li:hover ul {
    display:block; 
  }

Then, in JavaScript, override the hover event and keep the children hidden. Also, attach a click event and show the child on that:

Javascript:

 window.onload = function() {
  var menu = document.getElementById("menu"), //get the menu
    i = 0;
  //get the <li>s
  var parents = menu.children;
  for(i=0;i<parents.length;i++) {
    //override the hover event
    parents[i].onmouseover = function() {
      //hide the first child (which, in this specific case,
      //is the <ul> that we're looking for)
      //if you want to hide more children, you could
      //loop through and hide them all, etc.
     this.children[0].style.display = "none";
    };
    //on click, 
    parents[i].onclick = function() {
      //show the first child if it's hidden
      //hide if it's visible
     var c = this.children[0];
      c.style.display = c.style.display === "none" ? "block" : "none";
    };
  }

};

You can see an example here: http://jsbin.com/ifuvuw/2/edit

Please note:

This does not handle the nested menus you have. It's a simple example. You can take the basic principle and apply it to your case. If you have any questions on how it works, please ask, but if you're having trouble applying it, consider asking a new question.

TL;DR: You can't do it with CSS, but you can with Javascript

Pros: please tweak my (probably crappy) JS and improve it

Noobs: please ask if you don't understand how it works

Answer 2

The best way to accomplish this would be to use JavaScript. I'd recommend using the jQuery framework, it makes it a lot easier. Here is a good starting point:

http://api.jquery.com/click/