Question

这里你可以看到我有一个带五个按钮的垂直菜单，只有一个有一个子菜单
我想要什么时候选择子菜单.playa hover .terrenos状态感谢您的帮助

我的问题是，虽然我可以向他们展示其他标签的子菜单，但是我无法打开子菜单以供用户点击子菜单项。其他教程展示了如何仅在子菜单嵌套在父元素中时才这样做，但我的菜单结构代码没有嵌套子菜单（这是我加入项目时代码的方式）。如果用户在相应的选项卡上悬停，我是否可以通过某种方式保持子菜单打开？

<!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>CSS Sprite</title>





    <script src="http://code.jquery.com/jquery-latest.min.js">

    </script>



    <style>
    #navigationMenu ul li {
        visibility:hidden;
        position: fixed;


    }
    #navigationMenu li:hover .playa {
        visibility:visible;
        margin: -115px 65px;
        height:78px;
        width:78px;

    }#navigationMenu li:hover .otros {
        visibility:visible;
        margin: -115px 163px;
        height:78px;
        width:78px;


    }
    #navigationMenu  .playa:active,

    #navigationMenu a.terrenos.active  { background-position:-238px -226px;}


    #navigationMenu li {

        list-style:none;

        margin:0;

        padding:0}



    #navigationMenu li a {

        /**move text off screen**/

        text-indent: -9999em;

        height:78px;

        width:78px;

        margin:20px 0;

        padding:10px;

        background:url(btnmenu_03.png) no-repeat;

        display:block;

        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;    
        box-shadow: 3px 4px 6px #333;
        -moz-box-shadow:3px 4px 6px #333;
        -webkit-box-shadow:3px 4px 6px #333;


    }

    /* sub Button */
    #navigationMenu a.playa {
        background-position:-3px -336px;
        opacity:0.6;
        filter:alpha(opacity=60);
        box-shadow: none;
    }
    #navigationMenu a.playa:hover {
        opacity:1.0;
        filter:alpha(opacity=100); /* For IE8 and earlier */
    }
    #navigationMenu a.otros {
        background-position:-115px -336px;
        opacity:0.6;
        filter:alpha(opacity=60);
        box-shadow: none;

    }
    #navigationMenu a.otros:hover {
        opacity:1.0;
        filter:alpha(opacity=100); /* For IE8 and earlier */
    }


    /* apartamento Button */

    #navigationMenu a.apartamento { background-position:-2px -6px;}

    #navigationMenu a.apartamento:hover,

    #navigationMenu a.apartamento:active,

    #navigationMenu a.apartamento:focus,

    #navigationMenu a.apartamento.active { background-position:-2px -226px;}



    /* casas Button */

    #navigationMenu a.casas { background-position:-117px -4px;}

    #navigationMenu a.casas:hover,

    #navigationMenu a.casas:active,

    #navigationMenu a.casas:focus,

    #navigationMenu a.casas.active  { background-position:-117px -226px;}



    /* terrenos Button */

    #navigationMenu a.terrenos { background-position:-237px -3.5px;}

    #navigationMenu a.terrenos:hover,

    #navigationMenu a.terrenos:active,

    #navigationMenu a.terrenos:focus,

    #navigationMenu a.terrenos.active  { background-position:-238px -226px;}



    /* varios Button */
    #navigationMenu a.varios {background-position:-356px -4px;}

    #navigationMenu a.varios:hover,

    #navigationMenu a.varios:active,

    #navigationMenu a.varios:focus,

    #navigationMenu a.varios.active  { background-position:-358px -226px;}


    </style>

    </head>

    <body>



    <ul id="navigationMenu">

        <li><a class="apartamento" href="#"></a></li>

        <li><a class="casas" href="#"></a></li>

        <li><a class="terrenos" href="#"></a>
            <ul>

                <li><a class="playa" href="#"></a></li>

                <li><a class="otros" href="#"></a></li>

            </ul>

        </li>

        <li><a class="varios" href="#"></a></li>

    </ul>

    <div><a href="#"><img src="btncontacto.png" alt="contacto" width="160" height="51" /></a></div>



    <script>
    //select hover
    $('#navigationMenu li a').click(function(){

            $('.active').removeClass('active');

            $(this).addClass('active');

    });

        </script>

    </body>

    </html>

我希望我的子菜单选择，主菜单处于活动状态

0 个答案: