尝试选择菜单选项时,css悬停下拉菜单消失 [英] css hover drop down menu disappears when trying to select menu option

查看:436
本文介绍了尝试选择菜单选项时,css悬停下拉菜单消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

一段时间以来,我一直在寻找代码修复程序。

I have been searching for a fix for my code for a while now.

我有一个下拉菜单,当您将鼠标悬停在静态对象上时,该菜单会显示菜单内容,但是当您尝试选择其中一项时(移动鼠标移出静态对象)项目消失(重新显示:无)

I have a drop down menu that displays the content of the menu after you hover over a static object, however when you attempt to select one of the items (you move your mouse off of the static object) the items disappear (are set back to display: none)

我的代码如下:

HTML:

<div id="menuContainer">
    <div class="menuItem first">
        <div class="settingsIcon"></div>
        <div class="text">Account Settings</div>
        <div class="downArrowIcon"></div>
    </div>
    <div id="settingsMenu">
        <div class="menuItem">Manage clients</div>
        <div class="menuItem">Manage specials</div>
        <div class="menuItem">Manage users</div>
        <div class="menuItem">Logout</div>
    </div>
</div>';    

CSS:

div#menuContainer div:hover + div#settingsMenu{
    display: block;
    position: relative;
    z-index: 100;
}

div#menuContainer div#settingsMenu{
    display: none;
    width: 100%;
}

任何帮助将不胜感激。

推荐答案

您需要确保 display:none; 部分位于悬停区域上方(因为其阅读顶部-down,则需要适当的优先级),但将鼠标悬停在settingsMenu本身上时,还要显示 display:block;

You need to make sure the display:none; section is above the hover section (because its read top-down, you want priority appropriately), but also to have display:block; when hovering over the settingsMenu itself.

代码:

#settingsMenu{
    display: none;
    width: 100%;
}

#menuContainer div:hover + #settingsMenu,#settingsMenu:hover{
    display: block;
    position: relative;
    z-index: 100;
}

这里是要显示的jsFiddle

这篇关于尝试选择菜单选项时,css悬停下拉菜单消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆