Question

抱歉我的英语不好。经过几个小时的尝试，我的UL / LI子菜单最终出现了转换，但现在我遇到了问题。当我的moes进入按钮下方时，会出现子菜单。

- ＆GT;这里是小提琴，只有红色按钮有一个子菜单。要查看问题，请将鼠标放在红色按钮下方。

以下是代码：

    nav
    {
        height: 71px;
        width:1106px;
        margin-left: auto;
        margin-right: auto;
    }

    #horizontalmenu ul {
        padding:0px; 
        margin: 0px;
        list-style:none;
    }

    #horizontalmenu li {
        float:left; 
        width: 90px;
        height: 55px;
        position:relative; 

        display: inline-block;


        padding: 0px;
        margin: 0px;
    }

    #horizontalmenu li ul {
        width: 88px;
        padding:0px; 
        margin: 0px;
        opacity: 0;
        /*display:none;*/
        position:absolute;
        background:gray;
        border-left: 1px #2a2a2a solid; 
        border-right: 1px #2a2a2a solid; 
        border-bottom: 1px #2a2a2a solid; 
        transition: all .6s;

    }

    #horizontalmenu li:hover ul {



        display:block;
        width: 88px;
        height:auto; 
        /*width:90px;*/

        opacity: 0.9;



    }       




    #horizontalmenu li ul li{

        float: none; 
        position: static; 
        height: 40px; 
        line-height: 40px; 
        background: none; 
        padding: 2px;
        clear:both;
        text-align: center;
        width:88px;




    }
    #horizontalmenu li ul li a{


        /*display: block; PTET ICI */

        height: 40px; 
        font-size:12px;

        color: white;
        text-decoration: none;
        width:88px;



    }

    #horizontalmenu li:hover ul li { 

        width:88px;
        display: inline-block;
        padding: 2px;
        height: 40px; 
        line-height: 40px; 
        border-bottom: 2px #9f9f9f dotted;
        text-align: center;


    }

    #horizontalmenu li ul li:hover {

        background: #2a2a2a;

    }

    #horizontalmenu li ul li:hover a
    {

        position: static;
        height: 40px;
        display: inline-block;

    }

HTML 

<nav align="center">
    <span class="milieunav"><div class="horizontalmenu" id="horizontalmenu"><!--

    --><ul class="ulnav" id="menu"><li>

    <a href="#" class="b-accueil"></a></li><li class="libook">
        <a href="#" class="b-book"></a><!--
            --><ul class="sub-menu"><!--
                --><li><a href="#">Introduction</a></li><!--
                --><li><a href="#">Devenir Spades</a></li><!--
                --><li><a href="#">Regles et lois</a></li><!--
                --><li><a href="#">Grades</a></li><!--
                --><li><a href="#">Histoire</a></li><!--
            --></ul><!--
            --></li><li>
        <a href="#" class="b-commun"></a>
        </li><li>
        <a href="#" class="b-activite"></a>
        </li><li>
        <a href="#" class="b-bigben"></a>
        </li><li>
        <a href="#" class="b-bulle"></a>
        </li></ul><!--

    --></div></span><!--








    </nav>

Answer 1

元素仍在那里，只有100％透明。您必须使用display: none将其从布局中删除，而不是使用opacity将其隐藏。

编辑：你提到过渡，所以我认为你希望菜单淡入淡出。为此，display: none可能不是可行的方法，因为它可以阻止不透明度进行动画处理。

考虑visibility，display可以设置动画，与visibility不同。走这条路线时，请使用opacity和visibility。第一个是阻止元素接收事件，例如悬停，后者是视觉效果。

请记住，对于淡出，您需要延迟{{1}}的转换，否则菜单将立即隐藏（它从0到1动画，没有介于两者之间的值）。淡入淡出过渡在非悬停规则上设置。

可以在这里看到一个教程：http://www.greywyvern.com/?post=337

请参阅http://www.w3.org/TR/css3-transitions/#transition-shorthand-property以了解如何为不同的属性指定不同的转换参数。

当我的鼠标越过必须出现的位置时，会出现UL-LI子菜单。

1 个答案: