要实现响应式水平菜单样式，可以采用CSS Media Query和Flex布局。
首先，在HTML中创建一个菜单列表，并设置为Flex布局。可以如下所示：
<nav class="menu">
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
<li><a href="#">菜单项4</a></li>
</ul>
</nav>然后，在CSS中设置菜单样式，并使用Flex布局使其水平排列：
.menu {
display: flex;
justify-content: space-between;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.menu li {
margin: 0 10px;
}
.menu a {
text-decoration: none;
color: #333;
}接下来，使用Media Query来调整菜单样式以适应不同的屏幕尺寸。例如，当屏幕宽度小于600px时，将菜单项垂直排列并将菜单按钮添加到页面上：
@media (max-width: 600px) {
.menu {
flex-direction: column;
align-items: center;
}
.menu ul {
flex-direction: column;
align-items: center;
}
.menu li {
margin: 10px 0;
}
.menu-btn {
display: block;
}
}在HTML中添加菜单按钮：
<nav class="menu">
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
<li><a href="#">菜单项4</a></li>
</ul>
<a class="menu-btn" href="#">菜单</a>
</nav>这样，在屏幕尺寸较小时，菜单按钮将显示在页面上，并且菜单项将垂直排列。