我一直在尝试构建一个大型导航，但我无法弄清楚如何定位锚点并使其下拉内容自动显示。我有一个我在代码笔上工作的例子 http://codepen.io/shanekweb/pen/EZpjKo
例如，如果我将鼠标悬停在第一个链接 News 上并显示更多链接，我需要在将主要项目"新闻"悬停在右侧弹出的内容自动显示。
我需要这个，以便当将主要项目悬停在上面时，客户会立即看到所有第一个子链接的内容。
<div class="droppable">
<a class="firstLink" href="#">News</a>
<div class="megaNav">
<div class="drop1st">
<div class="parentMenu">
<ul>
<li><strong>first heading</strong></li>
<li class="expand">
<a href="#">one</a>
<div class="rightContent">
<section class="rightContent1">
<h4>Title 1</h4>
</section><!--rightContent1-->
<section class="rightContent2">
<h4>Title 2</h4>
</section><!--rightContent2-->
<section class="rightContent2">
<h4>Title 3</h4>
</section><!--rightContent3-->
</div><!--rightContent-->
</li>
<li class="expand">
<a href="#">two</a>
<div class="rightContent">
<section class="rightContent1">
<h4>Title 4</h4>
</section><!--rightContent1-->
<section class="rightContent2">
<h4>Title 5</h4>
</section><!--rightContent2-->
<section class="rightContent2">
<h4>Title 6</h4>
</section><!--rightContent3-->
</div><!--rightContent-->
</li>
<li class="expand">
<a href="#">three</a>
<div class="rightContent">
<section class="rightContent1">
<h4>Title 7</h4>
</section><!--rightContent1-->
<section class="rightContent2">
<h4>Title 8</h4>
</section><!--rightContent2-->
<section class="rightContent2">
<h4>Title 9</h4>
</section><!--rightContent3-->
</div><!--rightContent-->
</li>
</ul>
</div>
</div>
</div><!--megaNav-->
</div><!--droppable-->
<div class="droppable">
<a class="firstLink" href="#">top brands & agencies</a>
<div class="megaNav">
<div class="drop1st">
<div class="parentMenu">
<ul>
<li><strong>second heading</strong></li>
<li class="expand">
<a href="#">one</a>
<div class="rightContent">
<section class="rightContent1">
<h4>Title 1</h4>
</section><!--rightContent1-->
<section class="rightContent2">
<h4>Title 2</h4>
</section><!--rightContent2-->
<section class="rightContent2">
<h4>Title 3</h4>
</section><!--rightContent3-->
</div><!--rightContent-->
</li>
<li class="expand">
<a href="#">two</a>
<div class="rightContent">
<section class="rightContent1">
<h4>Title 4</h4>
</section><!--rightContent1-->
<section class="rightContent2">
<h4>Title 5</h4>
</section><!--rightContent2-->
<section class="rightContent2">
<h4>Title 6</h4>
</section><!--rightContent3-->
</div><!--rightContent-->
</li>
<li class="expand">
<a href="#">three</a>
<div class="rightContent">
<section class="rightContent1">
<h4>Title 7</h4>
</section><!--rightContent1-->
<section class="rightContent2">
<h4>Title 8</h4>
</section><!--rightContent2-->
<section class="rightContent2">
<h4>Title 9</h4>
</section><!--rightContent3-->
</div><!--rightContent-->
</li>
</ul>
</div>
</div>
</div><!--megaNav-->
</div><!--droppable-->
</nav><!--mainNav-->
#mainNav {
margin: auto;
max-width: 1242px;
position: relative;
box-sizing: border-box;
a {
text-decoration: none;
}
.droppable {
float: left;
a.firstLink:hover > .megaNav > .parentMenu > li.expand:first-child {
> .rightContent {
display: block;
}
}
> a {
padding: 5px 15px;
}
.megaNav {
display: none;
position: absolute;
left: 0;
width: 100%;
.drop1st {
overflow: auto;
position: relative;
z-index: 2;
background: #fff;
min-height: 380px;
background: #efefef;
.parentMenu {
width: 16%;
min-height: 380px;
background: #fafafa;
ul {
margin-left: 0;
list-style: none;
padding-left: 0;
}
li.expand:hover > div {
display: block;
}
.rightContent {
display: none;
position: absolute;
left: 16%;
top: 0;
width: 84%;
min-height: 380px;
h4 {
margin: 0;
}
.rightContent1 {
width: 25%;
float: left;
}
.rightContent2 {
width: 25%;
float: left;
}
.rightContent3 {
width: 50%;
float: left;
}
}
ul {
margin: 0;
}
}
}
}
&:hover {
.megaNav {
display: block;
}
}
}
}
我在 css 中尝试的是这样的，但我无法让它工作
a.firstLink:hover > .megaNav > .parentMenu > li.expand:first-child {
> .rightContent {
display: block;
}
}
您可以使用同级选择器(+(来选择.firstLink后面的.megaNav，然后使用简单的嵌套 - 即.classone .classtwo - 而不是使用>选择器，这在某些情况下过于具体。(例如，.parentMenu 的父级是 .drop1st ，而不是 .megaNav ，因此.megaNav > .parentMenu不会选择任何内容。
您还必须使用!important来覆盖其他样式的display: none。
结果将是：
.firstLink + .megaNav .parentMenu li.expand:nth-of-type(2) .rightContent {
display: block !important;
}
，这将需要该规则的大量变体才能使所有内容正确显示，因为您必须每次切换display: none并display: block !important，从而产生很多CSS。如果可能的话，您可以尝试简化标记并使您的 CSS 规则不那么具体，以便您可以在不使用 !important 的情况下逃脱。