// HTML
<div id="menu">
<ul>
<li><a href="#">Who we are</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Media</a></li>
</ul>
</div>
// CSS
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li {
display: inline-block;
}
#menu ul li a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
}
#menu ul li a:hover {
background-color: #f0f0f0;
}
// JavaScript
window.addEventListener('DOMContentLoaded', function() {
var menuItems = document.querySelectorAll('#menu ul li');
menuItems.forEach(function(item) {
item.addEventListener('click', function() {
// Handle menu item click event
console.log('Clicked on menu item: ' + item.textContent);
});
});
});
