css - 滑动子菜单纯 CSS

Question

我在纯 css 中使用滑动子菜单时遇到问题。
我正在使用 css transition 为子菜单的顶部边距设置动画，以便将其从页面顶部滑动，我希望它在标题背景下滑动。
我试过使用负 z-index，但这样子菜单的 anchor 不可点击。
所以我尝试在固定背景附件的子菜单的 ul 之前放置一个 span，如果我更改浏览器窗口的宽度，这很好，但当我向下滚动页面时就不好了。
有什么建议吗？

子菜单的声音是“Activitées”

negative z-index solution

span overlayer solution

负z-index解决方案子菜单CSS代码:

#main_menu ul li ul{
    position:absolute;
z-index:-1;
    min-width:160px;
    max-width:180px;
    background-color:#fff;
    padding:10px 0;
    border-radius:0 0 10px 10px;
    border:1px solid #1c435e;
    margin-top:-500px;

    transition-property: margin-top; 
    transition-duration: 1s;
    transition-timing-function: ease;

    -webkit-transition-property: margin-top; 
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease;

    -o-transition-property: margin-top;     
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease;

    -moz-transition-property: margin-top;  
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease;
}
#main_menu ul li:hover ul{margin-top:40px;}

跨度覆盖层解决方案 CSS:

#main_menu ul li{
    position:relative;
}
#main_menu > ul > li > a{
    font-size:1.9em;
    color:#fff;
    padding:3px 8px;
    position:relative;
    z-index:2;
}
#main_menu ul li.selected a,#main_menu ul li a:hover{
    background-color:#fff;
    border-radius:10px;
}
#main_menu ul > li > span{
    content:'';
    height:140px;
    width:180px;
    background:url("http://jeanclaudechiementin.com/art-time/css/img/bg_header.png") repeat-x fixed left top transparent;
    position:absolute;
    top:-69px;
    left:0;
    z-index:1;
}
#main_menu ul li ul, #main_menu ul li ul li{display:block;}

#main_menu ul li ul{
    position:absolute;
z-index:0;
    min-width:160px;
    max-width:180px;
    background-color:#fff;
    padding:10px 0;
    border-radius:0 0 10px 10px;
    border:1px solid #1c435e;
    margin-top:-500px;

    transition-property: margin-top;
    transition-duration: 1s;
    transition-timing-function: ease;

    -webkit-transition-property: margin-top;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease;

    -o-transition-property: margin-top;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease;

    -moz-transition-property: margin-top;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease;
}
#main_menu ul li:hover ul{margin-top:40px;}

Answer 1

不要使用负 z-index，而是增加另一个 z-index。负 z-index 会产生一些问题，并且它与某些旧浏览器(如 IE8)不兼容。

负 z-index 解决方案在 Firefox 40 中对我有用，但在某些浏览器中可能不起作用。

您可以使用 span overlayed 解决方案向宽度添加一些像素(距离左右边框 2 个像素)或制作 box-sizing:border-box 以在宽度中包含填充。所以我的建议是这样的:

 #main_menu ul > li > span {
      width: 182px;
 }

更新

为了适应假跨度背景，您需要将背景属性更改为:

 #main_menu ul > li > span selector {
    background: url("http://jeanclaudechiementin.com/art-time/css/img/bg_header.png") repeat-x left top ;
  }