Как сделать так, чтобы меню не исчезало ⇐ CSS

[Anonymous]

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

Код: Выделить всё

function showMenu() {
var len = document.getElementsByClassName("button");
for (var i = 0; i < len.length; i++) {
len[i].style.visibility = "visible";
}
}

Код: Выделить всё

.topnav {
position: fixed;
width: 98%;
height: 60px;
overflow: hidden;
top: 0;
border: 2px solid black;
border-radius: 10px;
padding: 5px;
background-color: white;
opacity: 0.5;
}

.topnav:hover {
opacity: 1.0;
}

.material-symbols-outlined {
transform: scale(2);
}

#welcome {
margin-top: 80px;
}

.button {
float: left;
color: #000000;
text-align: center;
padding-top: 12px;
text-decoration: none;
height: 50px;
width: 130px;
margin-right: 5px;
visibility: hidden;
}

.topnav a:hover {
background-color: #ddd;
color: black;
text-decoration: underline;
font-weight: bold;
}

.topnav a#active {
background-color: #4bc497;
}

.topnav-right {
float: right;
}

Код: Выделить всё

[url=home.html]Home[/url]
[url=aboutme.html]About Me[/url]
[url=projects.html]Projects[/url]
[url=contact.html]Contact Me[/url]

[url=home.html]home[/url]
[url=aboutme.html]person[/url]
[url=projects.html]workspaces[/url]
[url=contact.html]contact_mail[/url]

Подробнее здесь: https://stackoverflow.com/questions/783 ... sappearing