css3元素重叠,css关于发生元素重叠后2D转换的动作执行问题。

1.问题情况：

本人前端小白一枚，正在学习html+css。正在学习css中有关2D变换的一些属性，因此想做一个翻转菜单来增强自己的理解。但是发现一个无法理解的现象，特来请教大神们。具体问题下图：

动作为鼠标移动到一级菜单后对应的二级菜单显示。(visibility属性从hidden变为visible)

此时将鼠标移动到1所示位置，2处此时没有元素(即此时无元素重复)，该列二级菜单没有收回。

此时鼠标仍移动到1位置，2位置此时已经添加一个div，因为此时还未对二级菜单设置position属性，未脱离文档流，所以有元素重叠。觉得奇怪的现象出现了：当鼠标焦点在文本时，二级菜单没有收回，但当鼠标焦点在二级菜单时(因为设置为a标签，所以此时鼠标会变成手势)，二级菜单反而收回了！对这个结果我是有点懵的。。。。要是反过来我倒还能接受了。。

真心求教各位大神答疑解惑了！

2.代码如下：

2D综合练习-翻转菜单

/*企业开发不推荐如此写法*/

* {

margin: 0;

padding: 0;

}

.box1 {

margin: 0 auto;

margin-top: 100px;

width: 400px;

height: 300px;

border: 1px solid #ccc;

box-sizing: border-box;

}

.content {

width: 400px;

height: 260px;

background-color: #a7ffff;

}

ul li {

list-style: none;

}

/*一级菜单样式*/

.first-menu {

width: 400px;

height: 40px;

background-color: #a7ffff;

/*margin:0 auto;*/

}

.first-menu > li {

width: 120px;

height: 40px;

text-align: center;

line-height: 40px;

background-color: #ffb2a2;

float: left;

margin-left: 10px;

/*position: relative;*/

}

/*二级菜单样式*/

.second-menu {

/*为了重现这种情况，先将定位属性注释掉*/

/*position: absolute;*/

/*left: 0;*/

/*top: 40px;*/

}

.second-menu li {

width: 120px;

height: 40px;

line-height: 40px;

background-color: #ccc;

text-align: center;

transform: rotateY(180deg);

transition: all 1s;

visibility: hidden;

opacity: 0;

}

/*二级菜单展现样式*/

.first-menu > li:hover .second-menu li {

/*height: 40px;*/

transform: none;

visibility: visible;

opacity: 1;

}

.first-menu > li:hover .second-menu li:nth-child(1) {

transition-delay: 0ms;

}

.first-menu > li:hover .second-menu li:nth-child(2) {

transition-delay: 200ms;

}

.first-menu > li:hover .second-menu li:nth-child(3) {

transition-delay: 400ms;

}

.first-menu > li:hover .second-menu li:nth-child(4) {

transition-delay: 600ms;

}

.first-menu > li:hover .second-menu li:nth-child(5) {

transition-delay: 800ms;

}

/*二级菜单收回样式*/

.first-menu > li .second-menu li:nth-child(1) {

transition-delay: 800ms;

}

.first-menu > li .second-menu li:nth-child(2) {

transition-delay: 600ms;

}

.first-menu > li .second-menu li:nth-child(3) {

transition-delay: 400ms;

}

.first-menu > li .second-menu li:nth-child(4) {

transition-delay: 200ms;

}

.first-menu > li .second-menu li:nth-child(5) {

transition-delay: 0ms;

}

a {

display: block;

width: 120px;

height: 40px;

background-color: #3fff6c;

}

• 一级菜单

  • 二级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单

• 一级菜单

  • 二级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单

• 一级菜单

  • 二级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单

我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字

要是能在其他方面也提点一二，更是在此感激不尽啦！~

第一次提问，新手上路，好紧张啊~~~~