navigation sub-menu one page website - html

Question

I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. Usually I am just copy paste existing code and try to make some adjustments to what I want. Anyway I am working on a navigation menu on a one-page website. So till now that works. However, I want to have a sub-menu. I tried some things, but I cannot really get what I want. What I want is when I click on a menu item, the sub-menu opens and activate the first sub-menu item.
I found an example: http://inthe7heaven.com/fb-john-doe/dark/
The photo section. I tried to replicate that, but I think the sub-menu is connected to the filtering function of the photogallery.
Can anybody give me some guidance in this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services</li>
<li class="photos">
Photos
<div id="filter" class="category_filter_list">
<span class="active_link" id="all">All</span>
<span id="cookies">Cookies</span>
<span id="bread">Bread</span>
<span id="baking">Baking</span>
</div>
</li>
<li class="">Classes</li>
<!--<li class="">Testimonials</li>-->
<li class="">Contact</li>
</ul>
</nav>
CSS
nav {
position: absolute;
z-index: 999;
right: 0;
top: 0;
width: 158px;
height: 600px;
display: block;
overflow: hidden;
behavior: url(js/PIE.htc);
}
nav.on_caption {
background: rgba(20,11,19,.6);
-pie-background: rgba(20,11,19,.6);
}
nav.on_caption a {
color: #d0ced0;
}
nav.off_caption {
background: rgba(20,11,19,.08);
-pie-background: rgba(20,11,19,.08);
}
nav.off_caption a {
color: #524b51;
}
nav a {
font-size: 1.143em;
text-transform: uppercase;
}
nav > a {
padding-left: 24px;
}
ul.pagination {
margin: 0;
padding: 0;
padding-bottom: 8px;
list-style:none;
}
ul.pagination li {
margin: 0px 0px 0px 0px;
clear: both;
padding: 8px 10px 0px 24px;
list-style: none;
}
ul.pagination li:first-child {
padding-top: 25px;
}
nav > a:hover,
nav ul.pagination li a:hover,
nav ul.pagination li.current a {
color: #90705B;
}
So I got this code based on the website I provided above. I want the same effect as in the photo section only then for a normal menu item that is not connected to a filter. That is, when the menu item is clicked, the menu gets extended with the sub-menu and the page goes to the first item in the sub-menu. In addition, the sub-menu item gets active.

Answer 1

I managed to get the sub-menu expand and collapse in jsfiddle using a tree-menu. I tested it in jsfiddle and there it works. However, it doesn't work in my website. The menu doesn't expand. The website I am using it in is a single page website. So the menu items are pointing to a section on the page. So, I guess that my href="sub-1" is not working because it's pointing at the 3rd section of the page.
Is there a simple work-around for this? I don't need any fancy jquery effects, it just needs to open.
Furthermore, when the parent item is clicked, the sub-menu needs to expand and needs to activate the first sub-item. How can I do this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
.pagination > li ul:target {
display: block;
}

Answer 2

Made some progress.
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
jQuery
jQuery(
function($)
{
$('.pagination a').click(function(){$(this).next('ul').toggle();});
}
);
This works now. When I click the menu item, the sub-menu gets expended. However, how do I let the sub-menu collapse again when another menu item is clicked? And how do I let the page automatically go to the first sub-menu item by default when the menu item is clicked?