Creating Drop Down Menu on click CSS

Question

I\'m required to build a menu with 5 options, upon clicking a certain one a new sub menu is to appear. I have absolutely no idea how to do this.

相关标签:

Answer 1

 $('#open').on('click', function(e) {
   simple_showpopup("popup", e);
 });

 function simple_showpopup(id, evt) {
   var _pnl = $("#" + id);
   _pnl.show();
   _pnl.css({
     "left": evt.pageX - ($("#" + id).width() / 2),
     "top": (evt.pageY + 10)
   });

   $(document).on("mouseup", function(e) {
     var popup = $("#" + id);
     if (!popup.is(e.target) && popup.has(e.target).length == 0) {
       popup.hide();
       $(this).off(e);
     }
   });
 }

 $("#popup").hide();

.defa-context-panel {
  border: 1px solid black;
  position: absolute;
  min-width: 200px;
  min-height: 150px;
  background-color: #f8f8f8;
  border: solid 1px #f2f2f2;
  border-radius: 10px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Open&nbsp;&nbsp;&nbsp;&nbsp;<span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>

<div id="popup" class="defa-context-panel">Content
  <div>DIV inside</div>
</div>

Answer 2

You will need to do this using javascript and registering a click event handler to perform your action.

If you're new to everything then you should look for some javascript tutorials (don't use W3Schools, look elsewhere) and then look at some jQuery tutorials as jQuery simplifies tasks like these.