css一级栏目下拉效果

CSS一级栏目下拉效果是网站设计中常用的一种布局方式，通过CSS样式实现一级导航栏目鼠标悬停或点击时，下拉出现二级栏目菜单，方便用户浏览网站内容。

.nav-menu {
  position: relative;
  display: inline-block;
  font-size: 16px;
  margin-right: 20px;
}

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #ccc;
}

.nav-menu ul li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.nav-menu:hover ul,
.nav-menu:focus ul {
  display: block;
} 

以上是一个常用的CSS代码，实现了鼠标悬停或者点击一级导航栏目时，下拉菜单的显示。通过设置一级导航栏目为相对定位（position:relative），使得二级菜单的绝对定位（position:absolute）相对于一级菜单进行定位。

其中，ul标签的display属性被设置为none，表示初始状态下不显示，只有通过hover和focus事件才会触发二级菜单的显示。此外，通过设置z-index属性，保证二级菜单在其他网站元素之上，不被覆盖。

以上就是CSS一级栏目下拉效果的实现方法，通过简单的CSS代码即可实现方便实用的网站导航栏目设计。