使下拉式菜单在不悬停时保持不变

Posted 2023-03-06

技术标签:

【中文标题】使下拉式菜单在不悬停时保持不变【英文标题】：Making drop-down style menus stay when not hovering over them 【发布时间】：2013-06-26 10:00:20 【问题描述】：

我找到了制作下拉菜单的指南，它说当您停止将鼠标悬停在主菜单项上时，下拉菜单将保持不变。但是，我的菜单消失了，无法按项目！

如您所见，音乐菜单位具有下拉（或在本例中为“右下拉”）菜单。

在这里提琴： http://jsfiddle.net/Gb2aS/

代码在这里：

html：

<!DOCTYPE HTML>
<html>
<head>
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <title>Home</title>
</head>
<body>
    <div ID="menubox">
        <ul>
        <li><a href="http://folk.ntnu.no/arnstekl/" class="link">Home</a></li>
        <li><a href="#" class="link">Music</a>
            <ul>
                <li><a href="https://soundcloud.com/arnsteinkleven/" class="link">My music</a></li>
                <li><a href="http://folk.ntnu.no/arnstekl/gilberto.html" class="link">The Joao Gilberto project</a></li>
           </ul></li>
        <li><a href="https://www.github.com/arnstein" class="link">Github</a></li>

        <li><a href="http://www.flickr.com/photos/92472314@N03/" class="link">Pictures</a></li>

        </ul>

    </div>
    <div ID="circle">
        <p ID="title"> A <br> r <br> n <br> s <br> t <br> e <br> i <br> n </p>
    </div>
    </body>
</HTML>

CSS：

#menubox

    width: 8%;
    height: 30%;
    border: 10% solid #C7D93D;
    border-radius: 5%;
    position: fixed;
    margin-top: 12%;
    margin-left: 18%;
    font-family: Ubuntu, Lucida console, Futura;
    list-style: none;
    float: left;



#menubox ul li a

    text-align: left;
    font-size: 200%;
    color: #FFF0A5;


#menubox ul li

    color: #468966;
    font-family: Ubuntu, Lucida console, Futura;
    float: left;
    margin-right: 10px;
    position: relative;


#menubox ul

    color: #468966;
    font-family: Ubuntu, Lucida console, Futura;


#menubox ul ul

    position: absolute;
    left: -9999px;
    list-style: none;


#menubox ul ul li

    float: left;
    margin-left: 40%;
    position: relative;
    font-size: 60%;
    text-align: left;



#menubox ul ul a

    white-space: nowrap;


#menubox ul li:hover a

    text-decoration: none;
    color: #FFB03B;
 

#menubox ul li:hover ul

    left: 0;


#menubox ul li:hover ul a

    text-decoration: none;
    color: #FFB03B;


#menubox ul li:hover ul li a:hover

    color: #FFB03B;



div p

    color: #FFF0A5;
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    margin-top: 300px;
    line-height: 60px;



#circle

    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    background-color: #B64926;
    width: 500px;
    height: 500px;
    display: block;
    position: fixed;
    margin-top: 9%;
    margin-left: 52%;
    text-align: center;


#title

    text-color: #FFF0A5;
    font-size: 350%;
    display: inline;
    text-align: center;


body

    height: 100%;
    width: 100%;
    background-color: #468966;
    font-family: Ubuntu, Lucida console, Futura;


.link

    text-color: #FFF0A5;
    text-decoration: none;
    text-align: left;

【问题讨论】：

【参考方案1】：

问题是因为你的子列表是偏移的，所以光标必须从主菜单项和子菜单经过死区。这将解决您的问题：

#menubox ul li:hover ul

    left: 0;
    top: 0;
    z-index:100;

正如 Daniel Gimenez 上面解释的那样，子菜单保持可见的原因是因为它是主 ul 项目的子菜单，因此如果您将光标停留在子菜单上，浏览器会将光标视为将光标停留在原始菜单上菜单项也是如此，并且 :hover css 仍然存在。

它对于下拉/弹出菜单非常有效，因为即使子对象物理显示在其父对象之外，从代码的角度来看，它仍然在父对象“内部”。但是，如果两者之间存在任何物理间隙并且鼠标越过该间隙，则:hover 规则将被禁用并且子菜单消失。

【讨论】：

修复了我的菜单在有任何项目时消失的问题。【参考方案2】：

你的 css 有很多东西需要倾注。所以我只是把它归结为基础。我认为您的问题与主链接和子菜单之间的差距有关。

CSS解释 * 锚是块内联块类型，并且具有父 li 和 ul 的确切宽度。 * 子菜单在 li's 里面。因此，当 li 悬停在上方时，它们是可见的。子菜单是可见的，因为它是 li 的子菜单。 * 因为锚点是 100% 并且拉伸了 li，与子菜单相邻，所以当鼠标移到上面时，没有间隙，所以子菜单仍然可见。

jsFiddle

#menubox  
    position: absolute;
    left: 100px;
    top: 100px;


#menubox ul 

    display:inline-block;
    padding-left:0;


#menubox > ul 
    width: 100px;


#menubox > ul ul 
    position:absolute;
    display: none;
    width: 200px;


#menubox li 
    list-style-type:none;
    display:block;


#menubox li:hover 
    background:red;


#menubox a 
    display:inline-block;
    width:100%;


#menubox ul li:hover ul 
    display: inline-block;
    background: orange;

【讨论】：

【参考方案3】：

我在弹出的列表中添加了一些填充，实质上是在它周围创建了一个块。当您的鼠标在该块上时，它不会消失。

http://jsfiddle.net/Gb2aS/5/

#menubox ul ul

    position: absolute;
    left: -9999px;
    padding: 100px;
    list-style: none;

然而，绘制的圆圈会出现在列表上方的问题，但我将把它留给你。

不过，我确实更喜欢 Daniel 的解决方案。为链接提供自己的类是一种更好的处理方式。你最好看看他的解决方案并根据你的需要进行调整。

【讨论】：

@echoloaction，我更喜欢你的解决方案（我假设你的意思是我而不是提问者）。有时只是让一些东西工作就足够了。你实际上解决了他问的问题。 +1 @DanielGimenez 是的，我的意思是你，看错了名字。我的回答是快速解决，但通常鼓励使用类，特别是如果他进入子菜单并且对这个菜单变得更复杂，为什么我更喜欢你的。感谢你们，echolocation 和@danielgimenez！不幸的是，我无法使所有答案都正确。 relic180 是最简单的（两行代码与我自己做的不同），但我一定会检查你的答案，并考虑这样做。 @Arnstein 很高兴它为你解决了。您可能需要考虑添加一些填充，这样您就不必将鼠标停留在文本上，并且有一点余地。

以上是关于使下拉式菜单在不悬停时保持不变的主要内容，如果未能解决你的问题，请参考以下文章

下拉悬停不会保持静止

悬停后保持下拉菜单打开（CSS）

如何在鼠标位于下拉菜单的子菜单中时保持父菜单悬停

悬停在下拉菜单上时保持主导航项悬停 CSS

如何在悬停时制作 Bootstrap 的下拉菜单？

如何在悬停而不是单击时制作 Twitter Bootstrap 的“拆分按钮下拉菜单”下拉菜单？