Question

我在纯CSS中滑动子菜单有问题我正在使用css过渡来为子菜单的margin-top设置动画，以便从页面顶部滑动它，我希望它在标题背景下滑动。
我尝试使用负z-index，但这样子菜单的锚点不能用于制作。
所以我尝试在固定背景附件的子菜单的ul之前设置一个跨度，如果我改变浏览器窗口的宽度但是当我向下滚动页面时效果不好。这很好。
有什么建议吗？

子菜单的声音是“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

为你的li元素#main_menu添加一些额外的填充底部，当用户将鼠标移向子菜单时，它将向下延伸并保持鼠标悬停活动。

此修复适用于Negative -index solution

#main_menu ul li {
    position: relative;
    padding-bottom: 40px;
}

对于第二种方法，Span Overlay method

提供容器溢出属性并从 li span 中删除背景附件：已修复，因为其直接子＃ menu_lang 和 #main_menu 有浮动属性，它总是会为其父元素带来一些问题。

.container {overflow:hidden}

或将这两个子元素放在另一个div中，并将其溢出：隐藏

Answer 2

不要使用负z-index，而是增加其他z-index。负z-index会产生一些问题，并且与IE8等旧版浏览器不兼容。

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

您可以使用跨度覆盖解决方案向宽度添加一些像素（从左边框和右边框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 ;
  }

Answer 3

您不需要使用跨度。您可以简单地设置UL高度的动画。我创建了一个codepen。请检查一下。希望它对你有用。

#main_menu ul li:hover ul{margin-top:0; height: 290px;}
#main_menu ul li:hover ul:before{top:0;}
#main_menu ul li ul li{border-bottom:1px solid #7a9fb8;margin:0 10px;padding:10px;}
#main_menu ul li ul li:last-child {border-bottom:none;}
#main_menu ul li ul li a{font-size:1.6em;color:#1c435e;}
#main_menu ul li ul li a:hover{color:#7a9fb8;}

DEMO

Answer 4

问题已解决!!!
我做了第三个版本，在标题内使用了一个宽度设置为100％的缩进和缩进的背景图像。
比我把跨度放在包含子菜单的li里面只是背景颜色。
没有负z-index只有两个跨度，第一个用于缩进形状，第二个用于覆盖子菜单从顶部滑动。

标题HTML代码：

<header>
    <span></span>
    <div class="container">
        <nav id="menu_lang">
            <ul>
                <li class="selected"><a href="" title="fra" >fr</a></li>
                <li><a href="" title="eng" >en</a></li>
            </ul>
        </nav>
        <a class="logo" href="" rel="home"></a>
        <nav id="main_menu">
            <ul>
                <li class="selected"><a href="index.html" rel="home">Home</a></li>
                <li>
                    <a href="">Activitées</a>
                   <span></span>
                    <ul>
                        <li><a href="adulti.html">Cours adultes</a></li>
                        <li><a href="giovani.html">Cours jeunes</a></li>
                        <li><a href="loc-esp.html">Location espace</a></li>
                        <li><a href="compleanni.html">Anniversaires</a></li>
                    </ul>
                </li>
                <li><a href="news.html">News</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="contatti.html">Contacts</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS代码：

header{
    width:100%;
    height:130px;
    background-color:#1C435E;
    position:relative;
    z-index:1;
}
header > span{
    width:100%;
    height:10px;
    display:inline-block;
    background:url("http://jeanclaudechiementin.com/art-time/css/img/bg_header.png") repeat-x scroll left bottom transparent;
    position:absolute;
    z-index:1;
    bottom:-10px;
    left:0;
}
#main_menu ul li{
    padding-bottom:60px;
    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 > span{
    content:'';
    height:130px;
    width:180px;
    background-color:#1C435E;
    position:absolute;
    top:-69px;
    left:0px;
    z-index:1;
}
#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;}

>>Definitive solution
我希望这可以帮助别人!!!

滑动子菜单纯CSS

4 个答案:

更新