If anyone can resolve this, post your BTC address as well, and I'll send you 0.2 BTC. First come, first served.
Need a CSS based vertical expanding nav menu. No Javascript allowed. I have a CSS tab control working just fine, and mostly have the nav menu working, but am stuck. I can get the nav menu to expand upon clicking a parent menu, but when clicking on a sub-menu it instantly collapses the parent menu without redirecting the user to the new page.
Any help greatly appreciated! If it helps, here's some dumbed down CSS / HTML code:
.cnav {
position: relative;
display: block;
}
.cnav ul {
list-style-type: none;
}
.cnav ul > li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.cnav ul li > a {
font-size:14px;
height:38px;
width:100%;
line-height:38px;
border-bottom: 1px solid #c4c4c4;
border-top: 1px solid white;
color: #3f3f3f;
}
.cnav ul li > .sub {
display: none;
background: rgb(255,255,255);
margin-top:0px;
width:100%;
}
.cnav ul li a:focus + ul.sub { display: block; position: absolute; left: 0px; }
<div class="cnav">
<ul>
<li><a href="#">Home</a>
<ul class="sub">
<li><a href="/about">About Us</a></li>
<li><a href="/page1">Some Page</a></li>
<li><a href="/page2">Another Page</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul class="sub">
<li><a href="/about">About Us</a></li>
<li><a href="/page1">Some Page</a></li>
<li><a href="/page2">Another Page</a></li>
</ul>
</li>
<li><a href="#">Support</a>
<ul class="sub">
<li><a href="/about">About Us</a></li>
<li><a href="/page1">Some Page</a></li>
<li><a href="/page2">Another Page</a></li>
</ul>
</li>
</ul>
</div>
