css一级横向导航菜单

CSS一级横向导航菜单是网页设计中常用的一种导航方式，通过CSS可以实现简洁美观的导航菜单效果，为访问者提供了简便的导航功能。

<ul class="horizontal-nav">
   <li><a href="#">首页</a></li>
   <li><a href="#">公司介绍</a></li>
   <li><a href="#">产品展示</a></li>
   <li><a href="#">新闻中心</a></li>
   <li><a href="#">联系我们</a></li>
</ul> 

上述代码使用了ul和li标签创建一级导航菜单，通过CSS设置横向排列，并设置每个菜单项的样式。可以在CSS中设置菜单项的颜色、背景色等样式效果，让导航菜单看起来更加美观。

.horizontal-nav {
   display: inline-block; /*设置为行内块元素*/
   list-style-type: none; /*清除原有列表样式*/
   margin: 0;
   padding: 0;
   background-color: #333; /*设置背景色为黑色*/
}

.horizontal-nav li {
   float: left; /*每个菜单项横向排列*/
}

.horizontal-nav li a {
   display: block; /*将链接设置为块元素*/
   color: #fff; /*设置字体颜色为白色*/
   text-align: center; /*水平居中*/
   padding: 14px 16px; /*设置内边距*/
   text-decoration: none; /*去除下划线*/
}

.horizontal-nav li a:hover {
   background-color: #555; /*设置鼠标悬停背景色为深灰色*/
} 

上述代码就是CSS的样式部分，其中设置了一些常用的样式属性，如float、display、color等。我们可以根据需求自由设置它们的值，来达到我们想要的效果。

总体来说，创建CSS一级横向导航菜单并不难，只需要熟悉一些常用的CSS样式属性即可。在实际开发中，我们还可以加入一些动态效果，如使用JavaScript实现下拉菜单等，来满足更高级的需求。