@charset "UTF-8";

.box
{
  background-color: #F0FFF0;
  color: blue;
  height:1000;
  
 
  .roll
  {
    padding-bottom:1rem;
  }

  footer
  {
    position:fixed;bottom:0;z-index:999;width: 100%;height: 8rem;
  }
}

.mainmenu 
{
  position: relative;   /* 相对位置  */
  list-style-type: none; /* 移除默认的列表项符号 */
  margin: 0;
  padding: 0;
}
 
.mainmenu > li 
{
  position: relative;    /* 相对位置  */
  display: inline-block; /* 使菜单项水平排列 */
  margin-right: 0px; /* 添加一些间距 */
}

.mainmenu > li > a 
{
  display: block; /* 使链接块级显示，以便填充整个列表项 */
  padding: 10px; /* 添加一些内边距 */
  text-decoration: none; /* 移除下划线 */
  background-color: #F0FFF0; /* 背景颜色 */
  color: #A040A0; /* 文字颜色 */
}
 
.submenu 
{
  display: none; /* 默认隐藏子菜单 */
  position: absolute;  /* 绝对位置  */
  top: -100%; /* 将子菜单定位在父菜单项上方 */
  left: -150; /* 对齐左侧 */
  width: 400;
  list-style-type: none; /* 移除默认的列表项符号 */
  margin: 0;
  padding: 10;
  border: 2px solid blue;   /* 蓝色边框 */
  border-radius: 10px; /* 添加圆角 */
  background-color: #f9f9f9;  /* 背景色 */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); /* 添加阴影效果 */
}

.submenu > li 
{
  position: relative;   /* 相对位置  */
  display: inline-block; /* 使菜单项水平排列 */
  margin-left: 20px; /* 添加一些间距 */
  margin-right: 20px; /* 添加一些间距 */
}

.submenu2 
{
  display: none; /* 默认隐藏子菜单 */
  position: absolute;  /* 绝对位置  */
  top: -580; /* 将子菜单定位在父菜单项上侧 */
  left: -500; /* 对齐左侧 */
  width: 500;
  list-style-type: none; /* 移除默认的列表项符号 */
  margin: 0;
  padding: 10;
  border: 2px solid white;  /* 蓝色边框 */
  border-radius: 10px; /* 添加圆角 */
  background-color: white; /* 背景色 */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); /* 添加阴影效果 */
}

.submenu3 
{
  display: none; /* 默认隐藏子菜单 */
  position: absolute;  /* 绝对位置  */
  top: -500; /* 将子菜单定位在父菜单项上侧 */
  left: 100; /* 对齐左侧 */
  width: 325;
  list-style-type: none; /* 移除默认的列表项符号 */
  margin: 0;
  padding: 10;
  border: 2px solid white;  /* 蓝色边框 */
  border-radius: 10px; /* 添加圆角 */
  background-color: white; /* 背景色 */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); /* 添加阴影效果 */
}

.mainmenu > li:hover > .submenu,
.submenu > li:hover > .submenu2,
.submenu > li:hover > .submenu3
{
  display: block; /* 当鼠标悬停在父菜单项上时显示子菜单 */
}

.tooltip 
{
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 3px;
  border-radius: 3px;
  z-index: 1000;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); /* 添加阴影效果 */
}