I've created a grid to serve as a menu, with a top row consisting of an unordered list (ul) containing three list items (li). Each of these li elements contains another ul with four li items inside. I've added an event listener that triggers when the inner li elements with the "inner" class are clicked.
The code can be viewed at this link: http://jsfiddle.net/jimeast123/qK2Ju/2/
Clicking on the first two columns (make sure not to click on the text itself) results in the expected alert message, but clicking on the third column doesn't trigger any response. I've experimented with different numbers of columns and found that the last column never responds.
Here's my code: html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drop down</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
height: 120px;
background-color: #eef;
}
.top {
background-color: #fee;
}
.top li {
display: inline-block;
width: 5.5em;
height: 1.5em;
border: 1px solid black;
text-align: center;
}
li {
list-style: none;
}
.inner {
margin-left: -2.55em;
display:block;
}
li a {
text-decoration: none;
}
.inner li {
display: block;
text-align: center;
background-color: #efe;
}
</style>
</head>
<body>
<!-- heading>h1+nav>ul.top>li*5>(a[href=#]>{menu$})>ul.inner>li*4>a[href=#]>{menu$} -->
<header>
<nav>
<header>
<nav>
<ul class="top">
<li><a href="#">menuA</a>
<ul class="inner" id="one">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</li>
<li><a href="#">menuB</a>
<ul class="inner" id="two">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</li>
<li><a href="#">menuE</a>
<ul class="inner" id="five">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</li>
</ul>
</nav>
</header>
</nav>
</header>
<script src="dropdown.js"></script>
</body>
</html>
JavaScript:
if (document.body.addEventListener) {
document.body.addEventListener('click', theHandler, false);
} else {
document.body.attachEvent('onclick', theHandler); //for IE
}
function theHandler(e){
e = e || window.event;
var target = e.target || e.srcElement;
if (target.className.match(/inner/)) {
//console.log("inner class was clicked");
alert("inner class was clicked");
}
}