Question

第一次在这里问一个问题......

我正在制作一个下拉菜单，其中包含我从cssdeck.com获得的一些效果。基本上导航来自一个来源，而子菜单来自另一个来源。我混合了两个cssdeck.com来源，使它看起来像一个。

到目前为止，我让子菜单显示在悬停状态，但无法使其保持可见状态，因此我可以点击子菜单。

代码很长很复杂，我不确定如何显示/分享它以供您查看...

如何让“A”出现在“B”上：当我将指针移动到“A”以选择“A”上的某些内容时，将鼠标悬停并使“A”保持可见??????

<nav>
    <div class="nav_main ph-dot-nav"> 
        <a href="#">Home</a>
        <a href="#">About
            <div id="sub_about">
                <ul>
                    <li class="li_first"><a href="#">회사소개</a> </li>
                    <li><a href="#">대표인사말</a> </li>
                    <li class="li_last"><a href="#">회사연혁</a></li>
                </ul>
            </div>
        </a>
         <a href="#">Services</a>
         <a href="#">Portfolio</a>
         <a href="#">Partners</a>
         <a href="#">Contact</a>
        <div class="effect"></div>
    </div>
</nav>

Fiddle Demo here

Answer 1

如果您将鼠标悬停在子菜单上，则可以解决此问题。看到 https://jsfiddle.net/7xfrod2s/

#sub_about:hover {
   visibility: visible;
}

此外，我将visible: hidden样式移至ul（#sub_about）的父标记。

也许您需要另一个:before标记，以便标题和子菜单之间没有间隙（可以说是一个光标桥）;）

Answer 2

要通过CSS实现这一点，您需要遵守规则。首先来看看这张照片。 http://i.imgur.com/IAsz39w.png （我喜欢它，如果有人帮我张贴图片）

必须在Menu代码和subMenu之间没有空格。如果元素之间存在1px，则会失败。
使用简单的悬停阶段，如关注
subMenu必须是菜单的子项

隐藏subMenu

.subMenu{
    display: none;
}

当您将鼠标悬停在其父级或

上时，会显示subMenu

.menu:hover .subMenu{
    display: block;
}

解释：DOM的悬停状态非常简单。如果你在child element上徘徊，这也意味着你正在徘徊在它的父母身上。因此，您必须在Menu和subMenu之间留出任何空格。因为光标悬停在1px上1ms的移动，DOM将理解为悬停状态。所以它会隐藏subMenu

例如：在图片中。假装你的子菜单没有隐藏，所以如果你在subMenu上徘徊，DOM也会理解，因为你也在Menu（父菜单）上移动

出现悬停并保持可见

2 个答案: