要解决导航栏不展开的问题，您可以使用以下代码示例：

HTML代码：

  菜单
  

    
首页
    
关于我们
    
产品
    
联系我们
  

CSS代码：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.navbar-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.navbar-menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar-menu li {
  margin-right: 10px;
}

.navbar-menu li a {
  color: #fff;
  text-decoration: none;
}

JavaScript代码：

function toggleNav() {
  var navMenu = document.getElementById('navMenu');
  if (navMenu.style.display === 'block') {
    navMenu.style.display = 'none';
  } else {
    navMenu.style.display = 'block';
  }
}

在上述代码中，我们首先创建了一个包含导航栏的HTML结构。导航栏包括一个按钮和一个ul列表，用于展示导航菜单项。在CSS代码中，我们设置了导航栏的样式，包括背景颜色、字体颜色等。按钮样式设置为不显示，列表项的样式设置为水平布局。

在JavaScript代码中，我们定义了一个名为toggleNav的函数，用于切换导航菜单的显示和隐藏。通过获取导航菜单的元素并修改其display属性，我们可以实现单击按钮时导航菜单的展开和收起效果。

请确保将上述代码正确放置在HTML文件中，并且在按钮上添加了onclick事件处理程序，以便调用toggleNav函数。