Javascript-форум - Нужен совет!

Добрый день , начал разбираться Js ,но столкнулся с проблемой ..
При первом нажатии появляется блок,но затем не пропадает ... как нужно изменить код ,что он заработал корректно??

Понимаю ,что при повторном нажатии у блока по прежнему хранится первоначальный заданный стиль и условие не выполняется ,но как с этим быть не соображу ...

function myFunction() {	
var ff = document.getElementById('menu');
if (ff.style.display="none") { ff.style.display = "block"; } 
else { ff.style.display = "none";}
}

<html>
<head>
	<title>Test</title>
	<style type="text/css">#menu{display: none;}</style>
</script>
</head>
<body>
	<div class="menu-container"><ul id="menu" class="menu-22">
<li><a href="#">Добавить </a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Полезное</a></li>
</ul></div>
<button type="button" class="form-control" onclick="myFunction();"> Город </button>
</body>
</html>

<div class="menu-container"><ul id="menu" class="menu-22"> <li><a href="#">Добавить </a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Полезное</a></li> </ul></div> <button type="button" class="form-control" id = "b"> Город </button> <script> var ff = document.getElementById('menu'); ff.style.display = "block" document.getElementById("b").onclick = function myFunction() { if (ff.style.display === "none") { ff.style.display = "block"; } else { ff.style.display = "none";} } </script>

<html> <head> <title>Test</title> <meta charset="utf-8"> <style type="text/css">#menu{display: none;}</style> <script> function myFunction() { var ff = document.getElementById('menu'); if (ff.style.display!="block") { ff.style.display = "block"; } else { ff.style.display = "none";} } </script> </head> <body> <div class="menu-container"><ul id="menu" class="menu-22"> <li><a href="#">Добавить </a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Полезное</a></li> </ul></div> <button type="button" class="form-control" onclick="myFunction();"> Город </button> </body> </html>