html - Simple dropdown menu with javascript -

html - Simple dropdown menu with javascript -

i new @ javascript , can't seem simple dropdown menu work. have done far :

html code:

<ul> <li onclick='showmenu()'> <a href="#" >birds</a> <ul class="menu"> <li><a href="">ratites</a></li> <li><a href="">fowl</a></li> <li><a href="">neoaves</a></li> </ul> </li> </ul>

css code:

a { color: #06c; } ul { padding: 0; margin: 0; background: pink; float: left; } li { float: left; display: inline; position: relative; width: 150px; list-style: none; } .menu { position: absolute; left: 0; top: 100%; background: #ccc; display: none; }

javascript code:

function showmenu(){ document.getelementbyclass("menu").style.display="block"; }

my javascript code isn't working. why won't nested list show when click? here jsfiddle link code: http://jsfiddle.net/wkmd7h0r/13/

it's getelementsbyclassname not getelementbyclass. fixed code:

function showmenu() { document.getelementsbyclassname("menu")[0].style.display = "block"; }

also getelementsbyclassname returns nodelist collection, should utilize [0] first element in collection.

demo: http://jsfiddle.net/wkmd7h0r/14/

here example of more advanced functionality addeventlistener.

javascript html css