Using :target #id and classes to show/hide navigation without JS - css

Question

So I am struggling to make a show/hide button within my navigation to work. My goal is do this purely with CSS. It is supposed to activate when the browser screen is too small to display all the navigation items. I am successful in hiding the items I do not want seen at certain screen widths, however I cannot seem to get the link which activates the :target to display them when clicked.
Here is the css
nav {width:100%; min-width:287px;}
nav ul {padding:0;}
nav li {
list-style: none;
width:26%;
min-width:67px;
display:block;
line-height: 2.5em;
position: relative;
float: left;
border-bottom: 1px solid #fff;
background-color:#333;
box-shadow: 0px 5px 5px 1px #333;
text-align:center;}
nav li a {color:#fff; text-decoration:none; height:100%; font-size:1em; display:block; white-space:nowrap;}
nav li:hover {background-color:#BA7007;}
nav li a:hover {color:#FFF;}
nav li a:visited {color:#FFF; background-color:#333;}
.prio-alpha {}
.prio-gamma,
.prio-beta,
.show-nav-less {display: none;}
#prio:target + .prio-beta,
#prio:target + .prio-gamma,
#prio:target + .show-nav-less {display: block; }
#prio:target + .show-nav-more { display: none; }
.show-nav-more {width:20%;}
#media screen and (min-width: 41em) {
nav li {width:20%;}
nav li a {font-size:1.4em;}
.prio-beta { display: block; }
#prio:target + .prio-gamma, #prio:target + .show-nav-less {display: block;}
#prio:target + .show-nav-more { display: none; }}
#media screen and (min-width: 65em) {
nav li {width:16.5%;}
.prio-gamma { display: block; }
.show-nav-more,
#prio:target + .show-nav-less { display: none; } }
and html:
<nav>
<ul>
<li class="prio-beta">Home</li>
<li class="prio-alpha">Research</li>
<li class="prio-alpha">Publications</li>
<li class="prio-gamma">Space Flies</li>
<li class="prio-gamma">Aging PPG Project</li>
<li class="prio-alpha">Contact</li>
<li class="show-nav-more">+ more</li>
<li class="show-nav-less">- less</li>
</ul>
I have tried to switch up the order, placing the class in front of the :target and even removing #prior and just using .class:target to no apparent difference in the function of the code when live.

Answer 1

From what I understand you just want it so that you don't need JS for a submenu to open on click?
Here's a very quick/dirty version, it should get the idea across and hopefully you can edit it for your needs
Quick and Dirty
#nav {
list-style-type: none;
position: relative;
}
#nav li {
display: inline-block;
width: 100px;
border: 1px solid grey;
border-radius: 2px;
box-sizing: padding-box;
padding: 3px;
}
#nav #show_more {
display: none;
}
#nav li:target {
display: block !important;
position: relative;
top: 100%;
left: 10px;
}
<ul id="nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>
More
<ul class="submenu">
<li id="show_more">
There is more stuff here, woo.
</li>
</ul>
</li>
</ul>
One that uses Hovers
This should give a bit more responsiveness when hovering over a menu item. I'm not sure what you are going for, but hopefully one of these helps.
#nav,
#nav > li {
list-style-type: none;
position: relative;
}
#nav li {
display: inline-block;
width: 100px;
border: 1px solid grey;
border-radius: 2px;
box-sizing: padding-box;
padding: 3px;
}
#nav li > ul {
display: none;
}
#nav li:hover >ul {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
display: block;
}
#nav li:hover >ul li {
display: block;
}
<ul id="nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>
More
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>