[分享]css3左侧一级菜单

CSS3左侧一级菜单是网页设计中常用的一种菜单，其特点是菜单项显示在网站左边，通常以竖向列表的形式呈现，适用于导航、目录、分类等场景。.header { height: 50px; backgroun...

CSS3左侧一级菜单是网页设计中常用的一种菜单，其特点是菜单项显示在网站左边，通常以竖向列表的形式呈现，适用于导航、目录、分类等场景。

.header {
  height: 50px;
  background-color: #F5F5F5;
}

.menu {
  position: relative;
  width: 240px;
  height: 100%;
  background-color: #FFF;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  overflow: hidden;
}

.menu ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  height: 100%;
}

.menu li {
  position: relative;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu li:hover {
  background-color: #F5F5F5;
}

.menu li.active {
  background-color: #E5E5E5;
  color: #FF6600;
}

.menu span {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 4px;
  height: 100%;
  background-color: #FF6600;
}

.menu li:hover span,
.menu li.active span {
  display: block;
}

.sub-menu {
  position: absolute;
  left: 240px;
  top: 0px;
  width: calc(100% - 240px);
  height: 100%;
  background-color: #F5F5F5;
  box-shadow: -1px 0 10px rgba(0,0,0,.1);
  display: none;
}

.sub-menu.open {
  display: block;
}

.sub-menu ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.sub-menu li {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sub-menu li:hover {
  background-color: #FFF;
}

.sub-menu li.active {
  background-color: #FF6600;
  color: #FFF;
} 

以上是一个常用的CSS3左侧一级菜单样式代码，可以根据需要进行调整和定制，比如菜单项的高度、背景色、字体颜色、hover效果等等。