/* 为导航栏内的链接设置样式 */ .topnav a {   float: left;   display: block;   color: #f2f2f2;   text-align: center;   padding: 14px 16px;   text-decoration: none;   font-size: 17px;}

/* 添加一个活动类以突出显示当前页面 */ .active {   background-color: #4CAF50;  color: white;}

/* 隐藏应该在小屏幕上打开和关闭 topnav 的链接 */ .topnav .icon {  display: none;}

/* 下拉容器 - 需要放置下拉内容 */ .dropdown {  float: left;  overflow: hidden;}

/* 设置下拉按钮的样式以适合顶部导航 */ .dropdown .dropbtn {  font-size: 17px;   border: none;  outline: none;  color: white;  padding: 14px 16px;  background-color: inherit;  font-family: inherit;  margin: 0;}

/* 为下拉内容设置样式（默认隐藏）*/ .dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1;}

/* 为下拉列表中的链接设置样式 */ .dropdown-content a {  float: none;  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;  text-align: left;}

/* 在顶部导航链接和悬停时的下拉按钮上添加深色背景 */ .topnav a:hover, .dropdown:hover .dropbtn {   background-color: #555;  color: white;}

/* Add a grey background to dropdown links on hover */ .dropdown-content a:hover {   background-color: #ddd;   color: black;}

/* 当用户将鼠标移到下拉按钮上时显示下拉菜单 */ .dropdown:hover .dropdown-content {   display: block;}

/* 当屏幕宽度小于 600 像素时，隐藏所有链接，除了第一个（“主页”）。 显示包含应打开和关闭顶部导航 (.icon) 的链接 */ @media screen and (max-width: 600px) {  .topnav a:not(:first-child), .dropdown .dropbtn {    display: none;  }  .topnav a.icon {    float: right;    display: block;  }}

/* 当用户点击图标时，“响应”类被添加到带有 JavaScript 的 topnav 中。 此类使 topnav 在小屏幕上看起来不错（垂直显示链接而不是水平显示链接）*/ @media screen and (max-width: 600px) {  .topnav.responsive {position: relative;}  .topnav.responsive a.icon {    position: absolute;    right: 0;    top: 0;  }  .topnav.responsive a {    float: none;    display: block;    text-align: left;  }  .topnav.responsive .dropdown {float: none;}  .topnav.responsive .dropdown-content {position: relative;}  .topnav.responsive .dropdown .dropbtn {    display: block;    width: 100%;    text-align: left;  }}