javascript - 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.

/**Navigation */

nav {
  border: 1px solid red;
  float: left;
  margin-right: 35px;
  min-height: 280px;
}

nav li {
  text-decoration: none;
  font-weight: normal;
  color: red;
  list-style: none;
}


/**Content */

#section {
  background-color: ;
  border: 1px solid;
  font: normal 12px Helvetica, Arial, sans-serif;
  margin-left: 180px;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

<div class="clearfix"></div>
<nav>
  <ul>
    <li><a href="index.html" accesskey="1"> Home </a> </li>
    <li><a href="Portfolio.html" accesskey="2"> Portfolio </a> </li>

    <ul>
      <li><a href="Commercial.html">Commercial</a> </li>
      <li><a href="Residential.html">Residential</a> </li>
      <li><a href="heritage.html">Heritage</a> </li>
      <li><a href="Rennovations.html">Rennovations</a> </li>
    </ul>

    <li><a href="services.html" accesskey="3"> Services </a> </li>
    <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
    <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
  </ul>
</nav>

Answer 1

In addition to the already mentioned checkbox hack, you could also use a button as menu items, and use the :focus state to display the dropdown menu. A benefit over this is that the menu will close if you click outside of it. Some HTML elements do not naturally receive focus upon clicks; for those, you can add the "tabindex" attribute to allow them to gain focus.

ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menu button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu button:hover,
.menu button:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
    display: block;
}

<ul class="menu">
    <li>
        <button>Home</button>
        <ul class="submenu">
            <li><a href="http://www.barbie.com">Link</a></li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </li>
    <li><button>More</button></li>
    <li><button>Info</button></li>
</ul>