在网页设计中，菜单栏是一个非常重要的组成部分，它能够帮助用户快速导航到不同的页面或功能模块。一个简洁而美观的菜单栏可以提升用户体验，并使网站看起来更加专业。下面，我们将通过一段简单的HTML和CSS代码来实现一个基础的水平菜单栏。

HTML部分

```html

```

CSS部分（styles.css）

```css

/ 设置全局样式 /

{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: Arial, sans-serif;

}

/ 菜单栏的基本样式 /

.menu-bar ul {

list-style-type: none;

background-color: 333;

overflow: hidden;

}

.menu-bar li {

float: left;

}

.menu-bar li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

/ 鼠标悬停效果 /

.menu-bar li a:hover {

background-color: 575757;

}

/ 下拉菜单（可选） /

.menu-bar .dropdown {

position: relative;

}

.menu-bar .dropdown-content {

display: none;

position: absolute;

background-color: f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px rgba(0,0,0,0.2);

z-index: 1;

}

.menu-bar .dropdown:hover .dropdown-content {

display: block;

}

```

这段代码创建了一个基本的水平菜单栏，包含四个主要链接：“首页”、“关于我们”、“服务项目”和“联系我们”。每个链接都有默认的颜色和鼠标悬停时的颜色变化，使用户更容易注意到交互性。

如果你想要添加下拉菜单的功能，只需稍微修改HTML结构并在CSS中定义相应的样式即可。例如，为某个菜单项添加`class="dropdown"`，并在其后添加一个带有链接的`