javascript - Adding an event to a list child node -

i have list in navigation bar has list inside used drop down menu. overall list named categories (i know should have reference page trying dynamic content working first).

i have event listener attached element takes user page displays categories.

as hover on element displays list of categories. able click on 1 of these , take user straight category.

this works code in places. in others takes me page displays categories.

here code using add events:

var categoryheading = document.getelementbyid('categoriesnav');  droplist = document.createelement("ul"); droplist.setattribute("id", "categoriesdrop"); categoryheading.appendchild(droplist);  categoryheading.addeventlistener('click', displaycategoriespage); //displaycategoriespage displays page categories listed categoryheading.addeventlistener("mouseover", function(){   if(droplist){     droplist.style.display = "block";   } });  categoryheading.addeventlistener("mouseout", function(){   if(droplist){     droplist.style.display = "none";   } });  var categorylistitems = document.getelementsbyclassname("categorylistitem"); for(var i=0; i<categorylistitems.length; i++){   categorylistitems[i].addeventlistener("click", function(e){     displaysinglecategory(e); //displays page items 1 category   }); } 

here html:

<nav>   <ul>     <li id="homenav"></li>     <li id="categoriesnav">       <a>categories</a>       <ul id="categoriesdrop">         <li class="categorylistitem">outdoor</li>         <li class="categorylistitem">technology</li>       </ul>     </li>     <li id="basket"></li>     <li id="search"></li>   </ul> </nav> 

i assuming problem how <nav> laid out. or have added events.

in javascript whenever event triggered, it's default behaviour bubbling through dom.

in case, need stop event propagation because have click listener in child li , it's parent executed showing categories page instead of specific category page.

try put e.stoppropagation(); in child event listeners.