css - 无法捕获纯CSS水平菜单中设置的下链接(水平文本选项卡下设置的水平链接)？

Question

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

我在 http://jsfiddle.net/dq8z192L/11/ 中部分实现了我想要的

如您所见，我瞄准了悬停菜单。水平标签和每个标签在下面产生一组水平链接。

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

但是我在下面使用 CSS2 的问题是，尽管 CSS1 和 CSS2 都有 .linkgroup2:hover , .linkgroup3:hover {显示: block ； } 行。

我无法理解原因

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

注意:两种情况的 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

在不更改任何 html 结构的情况下，您只能通过 <ul> 的绝对定位来解决此问题修复 z-index通过将你的元素从流中移除，因为你的第一个 .linkgroup1将始终妨碍您的链接和其他 uls 并且会破坏 :hover

相关部分:

/* adjust the wrapping div height since you need to account for the ul height which will belost dues to the needed position:absolute - you could name your wrapping div .menu to make it clear */
body > div {position:relative;height:60px;}

/* absolutely position your ul so it's taken out of the flow */
ul { 
    position:absolute;
    top:20px;
    left:0;
    width:100%;
    list-style:none;
    display:block;
    margin:0;
    padding:0;
}
/* increase the z-index of the second and third menu so :hover will always be above the first one leaving it below when second is hovered and first still visible */
.linkgroup2, .linkgroup3 { display:none;z-index:2; }

现场样本: http://jsfiddle.net/mkwjvdz8/