How to make CSS drop down menu appear/change on click

Question

I have a web page, 1000px by 1000px for the main div. Inside the main div, at the top, there is a horizontal bar with four sections, each taking up 1/4 of the space. Each section has some text [wrapped in h2 tag], horizontally/vertically centered in the middle of the 1/4 section and each section must generate a drop-down menu.

For the drop down menu [which must work both on mobile and desktop], I borrowed the idea of using a checkbox [check for make dropdown visible, uncheck for invisible], but it isn't working correctly. The checkbox is small and if it is invisible it is almost impossible to know where to click to check/uncheck. I want the drop down menu to appear if the user clicks/taps ANYWHERE in the 1/4 section area.

The horizontal row of 1/4 section drop down menus looks like this:

^ Note that they don't actually work.

HTML Code:

<div id="Media_Choices">
    <div id="Video" class="media_choice"> <h2>Video▼</h2> </div>
    <div id="Pictures" class="media_choice"> <h2>Pictures▼</h2> </div>
    <div id="Audio" class="media_choice"> <h2>Audio▼</h2> </div>
    <div id="Stories" class="media_choice"> <h2>Stories▼</h2> </div>
</div>

CSS:

#Media_Choices {
    width: 100%;
    max-height:40px;
    min-height:40px;
}
.media_choice {
    display: inline;
    float: left;
    width: 24.5%;
    max-height: 38px;
    min-height: 38px;
    text-align: center;
    vertical-align: middle;
    line-height: 38px;       /* the same as your div height */
}
#Video {
}
#Pictures {
}
#Audio {
}
#Stories {
}

Extra credit if you can get the ▼ downward facing arrow to turn into a ▲ whenever the drop down menu is down and then revert back into a ▼ downward facing arrow whenever the menu is up. You don't need to use the check-box based technique [I know there is a hover option], but anything that works cross platform is good.

For reference, check boxes were origionally implemented using the following code [taken from another question], but copy-pasting in this solution and changing the text inside the box isn't good enough:

<input class="dropdowninput" type="checkbox" id="dropdownbox1"/>
<div class="dropdownbox">
    <label for="dropdownbox1">Open dropdown</label>
    <ul class="dropdown">
        <li>...</li><li>etc</li>
    </ul>
</div>
with CSS:

.dropdowninput, .dropdown {display:none;}
.dropdowninput:checked + .dropdownbox .dropdown {display:block;}

Answer 1

If i understand you correctly you want to create a responsive dropdown menu and you want the arrows to change when the menu appear/disappear, if this is the case a one way to do it would be to attach event listeners to the menu items that would show/hide the submenus on click, using css and javascript you can do the following:

.media_choice > h2:after {
    display: inline-block;
    content: '▼';
}
.media_choice.dropped > h2:after {
    content: '▲';
}
.media_choice > ul {
    display: none;
}
.media_choice.dropped > ul {
    display: block;
}

And with javascript add the event listeners:

$(document).ready (function()
{
    $('.media_choice').on ('click', function()
    {
        $(this).toggleClass ('dropped');
    });
});

JSFiddle

Answer 2

Here it is using checkboxes and no JS.

 nav { width: 80%; margin: 20px auto; } nav ul { margin: 0; padding: 0; list-style-type: none; overflow: none; /* to contain the floats */ } nav li { padding: 0; margin: 0; width: 25%; float: left; position: relative; white-space: nowrap; } nav input { display: none; } nav label { display: block; border: 1px solid black; padding: 10px; cursor: pointer; } nav label:hover { background: #ccc; } nav a { display: block; padding: 10px; } nav a:hover { background: #ccc; } nav label:after { content: '▼'; font-size: 10px; } nav ul ul { display: none; position: absolute; top: 100%; border: 1px solid red; box-sizing: border-box; background: #fff; width: 100%; } nav ul ul li { width: 100%; float: none; } nav input:checked ~ ul { display: block; } nav input:checked ~ label:after { content: '▲'; } 

 <!-- http://codepen.io/allicarn/pen/gPPmZZ --> <nav> <ul> <li> <input type="checkbox" id="navitem1" name="navinputs" /> <label for="navitem1">Menu Item #1</label> <ul> <li><a href="#">Sub Menu Item #1a</a></li> <li><a href="#">Sub Menu Item #1b</a></li> <li><a href="#">Sub Menu Item #1c</a></li> <li><a href="#">Sub Menu Item #1d</a></li> </ul> </li> <li> <input type="checkbox" id="navitem2" name="navinputs" /> <label for="navitem2">Menu Item #2</label> <ul> <li><a href="#">Sub Menu Item #2a</a></li> <li><a href="#">Sub Menu Item #2b</a></li> <li><a href="#">Sub Menu Item #2c</a></li> <li><a href="#">Sub Menu Item #2d</a></li> </ul> </li> <li> <input type="checkbox" id="navitem3" name="navinputs" /> <label for="navitem3">Menu Item #3</label> <ul> <li><a href="#">Sub Menu Item #3a</a></li> <li><a href="#">Sub Menu Item #3b</a></li> <li><a href="#">Sub Menu Item #3c</a></li> <li><a href="#">Sub Menu Item #3d</a></li> </ul> </li> <li> <input type="checkbox" id="navitem4" name="navinputs" /> <label for="navitem4">Menu Item #4</label> <ul> <li><a href="#">Sub Menu Item #4a</a></li> <li><a href="#">Sub Menu Item #4b</a></li> <li><a href="#">Sub Menu Item #4c</a></li> <li><a href="#">Sub Menu Item #4d</a></li> </ul> </li> </ul> </nav>