.main-header {

  margin: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 55px;
  color: white;
  background: #444;
  line-height: 55px;
  transform: translateY(0);
  transform: translate3d(0,0,0);
  transition: .25s transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.heads-up {
  transform: translateY(-60px);
  transform: translate3d(0,-60px,0);
}

.main-header h1 {
  float: left;
  font-size: 20px;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}

.main-header nav {
  float: right;
  font-size: 20px;
}

.main-header nav ul { 
  margin: 0; 
  padding: 0; 
}

.main-header nav li {
  all: initial;
  display: inline-block;
  border-left: 0px solid #555;
  color: white;
  float: left;
  width: 100px;
  height: 55px;
  

}
.main-header nav li a {
	  color: black;/* 设置下拉菜单中链接的文字颜色为黑色*/
      padding: 17px 25px;/* 设置链接的内边距*/
      display: block;/* 将链接显示为块级元素，使其占据整个宽度*/
	  text-align: center;
	  }
.main-header nav li a:link{color: white;}
.main-header nav li a:visited{color: white;}
.main-header nav li a:hover{color: orange; background-color: #555;}
.main-header nav li a:active{color: white;}

/* 下拉菜单样式 开始*/
     .dropdown-header {
	  all: initial;/* 屏蔽父辈css样式*/
      display: none;/* 默认情况下，下拉菜单是隐藏的*/
      position: absolute;/* 使下拉菜单相对于最近的已定位祖先元素（这里是导航栏列表项）进行定位*/
      background-color: #444;/* 设置下拉菜单的背景颜色*/
      min-width: 100px;/* 设置下拉菜单的最小宽度*/
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);/* 为下拉菜单添加阴影效果*/
      z-index: 1;/* 设置下拉菜单的层叠顺序，确保它显示在其他元素之上*/
    }

    .dropdown-header a {
	  all: initial;/* 屏蔽父辈css样式*/
      color: black;/* 设置下拉菜单中链接的文字颜色为黑色*/
      padding: 0px 0px;/* 设置链接的内边距*/
      text-decoration: none;/* 去除链接的下划线*/
      display: block;/* 将链接显示为块级元素，使其占据整个宽度*/
    }

    .dropdown-header a:hover {
      background-color: #f1f1f1;/* 当鼠标悬停在下拉菜单的链接上时，改变链接的背景颜色*/
    }
	nav ul li:hover .dropdown-header {
	  display: block;/* 当鼠标悬停在导航栏的列表项（nav ul li）上时，将下拉菜单（.dropdown-header）的显示状态从 none 改为 block，从而显示下拉菜单。*/
	/* 下拉菜单样式 结束*/