logo标签列表

使下拉式菜单在鼠标未悬停时保持展开状态

htmlcssmenuhover
4
我找到了一个制作下拉菜单的指南，它说当你停止悬停在主菜单项目上时，下拉菜单会保持固定。然而，我的菜单却消失了，导致无法点击菜单项！
正如您所看到的那样，音乐菜单是具有下拉式（或在这种情况下，“向右下拉”）菜单的部分。
Fiddle地址： 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;
}
3个回答
2

问题出在您的子菜单列表存在偏移，因此光标必须经过主菜单项和子菜单之间的空白区域。以下方法可以解决此问题：

#menubox ul li:hover ul
{
    left: 0;
    top: 0;
    z-index:100;
}

正如Daniel Gimenez所解释的那样，子菜单保持可见的原因是它是主ul项的子项，因此如果您将光标保持在子菜单上，浏览器会将其视为将光标保持在原始菜单项上，并且:hover css仍然有效。
对于下拉/弹出菜单而言，这种方法非常有效，因为即使子对象在物理上显示在其父对象之外，从代码的角度来看，它仍然处于父对象之内。但是，如果两者之间存在任何物理差距，并且鼠标穿过该差距，则:hover规则将被停用，子菜单将消失。
修复了我的一个问题，当任何项目在菜单后面时，菜单会消失。 - Volearix
1
你的CSS文件很长，所以我将其简化为基础部分。我认为你的问题与主链接和子菜单之间的间隙有关。
CSS解释： * 锚点是块内联块类型，并具有父级li和ul的确切宽度。 * 子菜单在li内部。因此，当悬停在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;
}
1
我已经为弹出的列表添加了一些填充，从本质上创建了一个块。当你的鼠标在该块上时，它不会消失。

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

#menubox ul ul
{
    position: absolute;
    left: -9999px;
    padding: 100px;
    list-style: none;
}

然而，有一个问题是绘制的圆圈被放置在列表上方，但我会留给你处理。

不过，我确实更喜欢丹尼尔的解决方案。给链接分配自己的类是更好的处理方式。最好查看他的解决方案并将其调整为您想要的样子。

1
@echolocation，我更喜欢你的解决方案（我想你是指我而不是提问者）。有时候只要让事情运转起来就足够了。而且你实际上解决了他提出的问题。+1 - Daniel Gimenez
@DanielGimenez 没错，我是指你，看错名字了。我的回答只是一个快速修复，但通常鼓励使用类，特别是如果他进入子菜单并且这个菜单变得更加复杂，这就是为什么我喜欢你的方式。 - echolocation
感谢你们两个，echolocation和@danielgimenez！不幸的是，我不能让所有答案都正确。relic180是最简单的（只有两行代码与我自己所做的不同），但我一定会查看你们的答案，并考虑以那种方式来做。 - user1640474
@Arnstein，很高兴它对你有用。您可能需要考虑添加一些填充，这样您就不必将鼠标放在文本上，并且有一些余地。 - echolocation
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接