Question

我正在制作一个水平下拉菜单，我让它工作，当你将鼠标悬停在图像上时，后面的图像会显示在它下面，然后当你离开主链接时;他们消失了。但问题是，我是否想要它，以便当您将鼠标悬停在其中一个后续链接上时，链接会保留，直到您离开它们，此时它们会在您移动链接时消失。

HTML：

<nav id="navigation">
        <ul style="list-style:none">


             <li class="fixtures"><img id="sweets-button" src="images/Sweets_Button.png"></li>
             <ul style="list-style:none" class="hidden">
                <li ><img  src="images/Sweets_Button-Dropdown.png"></li>       
                <li><img  src="images/Sweets_Button-Dropdown.png"></li>
             </ul>

        </nav>

CSS：

    #navigation ul.fixtures:hover{ /*  Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class'  */
        color: #000;
        margin-top:1px;
    -webkit-transition-duration: 0.4s;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
    -webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
    background: rgba(255,102,51,0.8);
    opacity: 50%;

}
ul.hidden{      

    display: none;
    position:absolute;  
    margin-top:-90px;
    margin-left:110px;
}

li.fixtures:hover +  ul.hidden{ /*  Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class'  */
    display: block;
    position:absolute;  
    margin-top:-20px;
    margin-left:72px;
}

感谢您的帮助！

这里有一些jsfiddle，它可以帮助你想象它：

http://jsfiddle.net/QkY83/

Answer 1

Básically，您必须在父菜单项（ul）内添加整个子菜单（li.fixtures元素）。这是一个最小的例子（在你提供的jsfiddle http://jsfiddle.net/QkY83/3/中更新）：

HTML：

<nav id="navigation">
    <ul style="list-style:none">
        <li class="fixtures"><a> This is main link </a>
            <ul style="list-style:none" class="hidden">
                <li><a> This is first sub-link </a></li>
                <li><a> This is Second sub-link </a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS：

ul.hidden {
    display: none;
    position:absolute;
}
li.fixtures:hover ul.hidden {
    /* Applied to the child ul  */
    display: block;
    margin-top:-20px;
    margin-left:72px;
}

使链接保持在页面上，直到光标没有悬停在它们上面

1 个答案: