Solution:
The following achieves the desired results ie separate functionality for top level and nested <li>
's.
To be honest I don't yet really know how it works, but it works and I added a bit of extra functionality to test things out. But no marks needed for code prettiness.
HTML:
<div id="container">
<ul class="squares">
<li>
<ul class="nested">
<li class="hidden_li" style="height: 20px; width: 50px; background: yellow; display: none; position: relative; z-index: 999999; left: 0px;top: 70px;">
<a href="">test</a>
</li></ul>
</li>
<li>
<ul class="nested">
<li class="hidden_li" style="height: 20px; width: 50px; background: yellow; display: none; position: relative; z-index: 999999; left: 0px;top: 70px;">
<a href="">test</a>
</li></ul>
</li>
<li></li>
<li></li>
// etc
</ul>
</div>
CSS
#container {
height: 205px;
overflow-y: auto;
width: 400px;
}
.select {
border: 2px solid red !important;
}
.select_blue {
border: 2px solid blue !important;
}
.squares {
list-style: none outside none;
margin: 0;
padding: 0;
white-space:nowrap;
}
#container ul li {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
border-radius: 4px;
cursor: pointer;
display: inline-block;
height: 100px;
margin-right: 25px;
vertical-align: top;
width: 100px;
}
jQuery
// just for <li>
$(document).on("click","ul.squares > li:nth-child(1n-7)", function (e) {
$(".hidden_li").hide();
$(this).find(".hidden_li").fadeIn();
$("ul.squares > li:nth-child(1n-7)").removeClass("select");
$(this).addClass("select");
e.preventDefault();
//alert("i am a li");
});
// just for nested <li>
$(document).on("click","ul.nested > li", function (e) {
e.stopPropagation();
$("ul.nested > li").removeClass("select_blue");
$(this).addClass("select_blue");
e.preventDefault();
alert("i am a nested li");
});
More comments and demo on jsFiddle: