解决这个问题的方法是通过使用CSS媒体查询来实现不同的桌面和移动导航栏样式。以下是一个示例代码：

HTML代码：

  

    
首页
    
关于
    
产品
    
联系
  

CSS代码：

/* 桌面导航栏样式 */
.navbar {
  background-color: #333;
  color: #fff;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
  margin-right: 10px;
}

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

/* 移动导航栏样式 */
@media screen and (max-width: 600px) {
  .navbar {
    background-color: #f8f8f8;
    color: #333;
  }
  
  .navbar ul {
    display: none;
  }
  
  .navbar li {
    display: block;
    margin-bottom: 10px;
  }
  
  .navbar li a {
    color: #333;
    text-decoration: none;
  }
}

在这个示例中，我们首先定义了桌面导航栏的样式，然后使用@media规则来定义移动导航栏的样式。在媒体查询中，我们使用max-width属性来指定屏幕宽度小于600像素时应用移动导航栏样式。在移动导航栏样式中，我们隐藏了导航栏的ul元素，并将每个导航项显示为块级元素，以垂直排列。