Hide/Show submenu items in responsive navigation menu using CSS - css

Question

I have created a menu that is only visible on mobiles.
Using CSS I've managed to create a SHOW/HIDE NAVIGATION menu. You can see this in action at http://js.co.nz/mobile-test.php (currently only in portrait view on mobiles as that's as far as I've got with development).
I want to be able to show/hide the submenu items too (as the navigation menu is very long!). For example, if the user clicks on "Browse by type" I would like the submenu of: Chairs; Tables; Mirrors etc to appear.
The html currently looks like this:
<nav id="responsivenav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>BROWSE ALL STOCK</li>
<li>BROWSE BY TYPE
<ul>
<li>Antique chairs</li>
<li>Dining tables</li>
<li>Antique mirrors<li>
</ul>
</li>
<li>BROWSE BY CATEGORY</li>
<li>BROWSE BY ROOM</li>
<li>REDUCED ITEMS</li>
<li>OPENING HOURS</li>
<li>NEWS</li>
<li>FIND US</li>
<li>ABOUT US</li>
<li>BROCHURES</li>
<li>PERIOD STYLES</li>
</ul>
<div class="clear"></div>
</nav>
The css looks like this:
#responsivenav {display:block;}
#responsivenav > a { }
#responsivenav:not( :target ) > a:first-of-type,
#responsivenav:target > a:last-of-type {
display: block;
height:50px;
line-height:50px;
font-size:15px;
margin-bottom:0;
padding:0;
text-indent:100px;
text-decoration:none;
color:#fff;
font-weight:bold;
text-transform:uppercase;
background: #393b3c url(../images/wd/mobile-menu-icon.jpg) no-repeat 40px center; }
/* first level */
#responsivenav > ul {
height: auto;
display: none;
border-bottom:5px solid #fff;}
#responsivenav:target > ul {
display: block;
list-style:none;
padding:0;
margin:0;}
#responsivenav > ul > li {
width: 100%;
float: none;
display:block;
height:60px;
line-height:60px;
font-size:15px;
text-indent:40px;
border-top: 1px solid #eee;}
#responsivenav > ul > li a {
text-decoration:none;
color:#393b3c;}
/* second level */
#responsivenav > ul > li > ul {
display: none;
}
#responsivenav > ul > li:hover > ul {
display:block;
}
It is this second level of the menu that I know I haven't got right. I've tried various ways of doing it e.g. adding classes to the submenus, using left:-9999px instead of display:none; etc but nothing seems to work yet.
Please help! I'm sure this should be so simple!

Answer 1

Just replace the property height: 60px to min-height: 60px of the #responsivenav > ul > li (line 138 in PhonePtest.css file).
Currently, your code makes the submenu appear on hover which in case of mobile works on click. That is why the navigation menu hides on click. To prevent this you can replace
BROWSE BY TYPE
with
BROWSE BY TYPE
You can do the same with the other menu elements.