Question

我想在悬停水平菜单上创建一个纯CSS。

中部分实现了我的目标

你会看到ı针对悬停菜单。水平标签和每个标签在下面生成一组水平链接。

然后我创建了http://jsfiddle.net/dq8z192L/13/。目标是：让最左侧标签的链接集默认显示，让其他标签的链接集在悬停时起作用。

然而，下面我的CSS2问题是我无法在悬停HEADING 02或HEADING 03标签期间捕捉鼠标链接，尽管CSS1和CSS2都有.linkgroup2:hover , .linkgroup3:hover { display:block; }行。

我无法理解原因

我做错了什么？你能纠正我吗？

注意：2个案例的HTML代码相同。

HTML

<div>
    <div id="c1">HEADING 01</div>
    <div id="c2">HEADING 02</div>
    <div id="c3">HEADING 03</div>
    <ul class="linkgroup1">
        <li><a href="#" title="">link 01</a></li>
        <li><a href="#" title="">link 02</a></li>
        <li><a href="#" title="">link 03</a></li>
    </ul>
    <ul class="linkgroup2">
        <li><a href="#" title="">link 04</a></li>
        <li><a href="#" title="">link 05</a></li>
        <li><a href="#" title="">link 06</a></li>
    </ul>
    <ul class="linkgroup3">
        <li><a href="#" title="">link 07</a></li>
        <li><a href="#" title="">link 08</a></li>
        <li><a href="#" title="">link 09</a></li>
        <li><a href="#" title="">link 10</a></li>
    </ul>
</div>
<div><p>some stuff here ...</p></div>

CSS 1（目标部分通过此CSS实现）

#c1, #c3 { width: 33%; float:left; background-color:#ef6;}
#c2 { width: 34%; float:left; background-color:#eee; }
ul { list-style:none; }
li { display: inline; }

.linkgroup1 , .linkgroup2 , .linkgroup3 { display:none; }

#c1:hover ~ .linkgroup1 { display:block; }

#c2:hover ~ .linkgroup2 { display:block; }
#c2:hover ~ .linkgroup1 { display:none; }
#c2:hover ~ .linkgroup3 { display:none; }

#c3:hover ~ .linkgroup3 { display:block; }
#c3:hover ~ .linkgroup1 { display:none; }
#c3:hover ~ .linkgroup2 { display:none; }

.linkgroup1, .linkgroup2 , .linkgroup3 { padding-top:3em; }
.linkgroup1:hover , .linkgroup2:hover , .linkgroup3:hover { display:block; }

.linkgroup1 { background-color:#6e7fe4; }
.linkgroup2 { background-color:#f4e32b; }
.linkgroup3 { background-color:#b3ffff; }

CSS 2（此CSS根本不起作用）

#c1, #c3 { width: 33%; float:left; background-color:#ef6;}
#c2 { width: 34%; float:left; background-color:#eee; }
ul { list-style:none; }
li { display: inline; }

.linkgroup2 , .linkgroup3 { display:none; }

#c2:hover ~ .linkgroup1 { display:none; }
#c2:hover ~ .linkgroup3 { display:none; }
#c2:hover ~ .linkgroup2 { display:block; }

#c3:hover ~ .linkgroup1 { display:none; }
#c3:hover ~ .linkgroup2 { display:none; }
#c3:hover ~ .linkgroup3 { display:block; }

.linkgroup1, .linkgroup2 , .linkgroup3 { padding-top:3em; }
.linkgroup2:hover , .linkgroup3:hover { display:block; }

.linkgroup1 { background-color:#6e7fe4; }
.linkgroup2 { background-color:#f4e32b; }
.linkgroup3 { background-color:#b3ffff; }

Answer 1

以下是我创建的您想要的解决方法：jsFiddle。基本上你的第二个jsFiddle中发生的是当光标离开#c2或#c3区域以移动到linkgroup2或linkgroup3区域时， linkgroup1元素开始再次出现，当光标结束#c2或#c3时，您添加的CSS已经生效，因为光标现在已经结束了linkgroup1元素的区域。

这是我在小提琴中使用的新代码。

HTML：

<ul>
    <li>
        <div id="c1">HEADING 01</div>
        <ul class="linkgroup1">
            <li><a href="#" title="">link 01</a>

            </li>
            <li><a href="#" title="">link 02</a>

            </li>
            <li><a href="#" title="">link 03</a>

            </li>
        </ul>
    </li>
    <li>
        <div id="c2">HEADING 02</div>
        <ul class="linkgroup2">
            <li><a href="#" title="">link 04</a>

            </li>
            <li><a href="#" title="">link 05</a>

            </li>
            <li><a href="#" title="">link 06</a>

            </li>
        </ul>
    </li>
    <li>
        <div id="c3">HEADING 03</div>
        <ul class="linkgroup3">
            <li><a href="#" title="">link 07</a>

            </li>
            <li><a href="#" title="">link 08</a>

            </li>
            <li><a href="#" title="">link 09</a>

            </li>
            <li><a href="#" title="">link 10</a>

            </li>
        </ul>
    </li>
</ul>
<div>
    <p>some stuff here ...</p>
</div>

CSS：

#c1, #c3 {
    background-color:#ef6;
}
#c2 {
    background-color:#eee;
}
ul {
    list-style:none;
    padding: 0px;
}
ul li {
    display: inline-block;
    width: 32%;
    vertical-align: top;
}
ul li ul {
    width: 95%;
    position: absolute;
    left: 7px;
}
ul li:hover ul {
    display: block;
}
ul li ul {
    display: none;
}
ul li:first-child ul {
    display: block;
}
.linkgroup1, .linkgroup2, .linkgroup3 {
    padding-top:3em;
}
.linkgroup1 {
    background-color:#6e7fe4;
}
.linkgroup2 {
    background-color:#f4e32b;
}
.linkgroup3 {
    background-color:#b3ffff;
}

Answer 2

在不更改任何html结构的情况下，您只能通过绝对定位<ul>来解决此问题，以便通过将您的元素排除在流量之外来修复z-index，因为您的第一个{{1}将永远妨碍你的链接和其他uls之间的方式，并将毁掉.linkgroup1

无法捕获纯CSS水平菜单中的下方链接集（水平文本标签下的水平链接集）？

2 个答案: