Question

我一直在尝试复制www.sklz.com的顶级菜单，但仅使用CSS而不使用JS。我已经设法在那里获得了99％，但我仍然坚持一个小错误。当菜单居中时，我似乎无法将下拉部分移到导航栏下方（因此您无法看到它直到它低于它）但是保持在下一个div之上（在这种情况下黄色条）。无论我尝试使用z-index等，它都会将下拉列表放在黄色栏后面或导航栏上方。

所以我想要的堆栈顺序（从低到高）是：

1）黄条 2）下拉内容 3）导航栏（黑色100％宽度栏） 4）导航（下拉文本）

＆＃13;

body {
	margin:0px;
	padding:0px;
	text-align:center;
}

.navBar {
	width:100%;
	background-color:#000;
	z-index:0;
}

.nav {
	width:1000px;
	margin:0px auto 0px auto;
	z-index:10;
}

.dropdown {
    position: relative;
    display:block;
	cursor:pointer;
	float:left;
}

.dropdownText {
	text-decoration:none;
	padding:20px 20px;
	background-color:#000;
	color:#fff;
	position: relative;
	margin:0px 0px 0px 0px;
	font-size:14px;
	z-index:5;
}

.dropdownText:hover {
	color:#FAE400;
}

.dropdown-content {
    display: block;
    position:fixed;
	left:0;
    background-color: #f9f9f9;
    width:100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
	margin:-200px 0px 0px 0px;
	transition:all ease-out .5s;
	opacity:0;
}

.dropdown:hover .dropdown-content {
    display: block;
	margin:0px 0px 0px 0px;
	opacity:100;
}

＆＃13;

<div style="width:100%; height:100px; background-color:#212121; z-index:150; position:relative;"></div>

<div class="navBar">
<div class="nav">
<div class="dropdown">
  <div class="dropdownText">PERFORMANCE TRAINING</div>
  <div class="dropdown-content">
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
  </div>
</div>
<div class="dropdown">
   <div class="dropdownText">SOCCER</div>
  <div class="dropdown-content">
    <div style="float:left; width:49%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:49%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
  </div>
</div>
<div class="dropdown">
   <div class="dropdownText">BASEBALL</div>
  <div class="dropdown-content">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
  </div>
</div>
<div class="dropdown">
   <div class="dropdownText">BASKETBALL</div>
  <div class="dropdown-content">
    <p><a href="#">Product link 1</a></p>
  </div>
</div>
<div class="dropdown">
  <div class="dropdownText">GOLF</div>
  <div class="dropdown-content">
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
  </div>
</div>
<div class="dropdown">
  <div class="dropdownText">OTHER SPORTS</div>
  <div class="dropdown-content">
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
  </div>
</div>
<div class="dropdown">
  <div class="dropdownText">PRO MINI</div>
  <div class="dropdown-content">
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
  </div>
</div>
<div class="dropdown">
  <div class="dropdownText">EXPLORE</div>
  <div class="dropdown-content">
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
    <div style="float:left; width:32%">
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    <p><a href="#">Product link 1</a></p>
    </div>
  </div>
</div>
<div style="clear:both;"></div>
</div>
</div>

＆＃13;

Answer 1

您可以在 max-height 属性上设置转场。改变这两个css类：

.dropdown-content {
    display: block;
    position:fixed;
    left:0;
    background-color: #f9f9f9;
    width:100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    margin:-200px 0px 0px 0px;
    transition:all ease-out .5s;
    opacity:0;
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
}

.dropdown:hover .dropdown-content {
    display: block;
    margin:0px 0px 0px 0px;
    opacity:100;
    max-height: 500px;
    transition: max-height 1s ease-in;
}

JSFiddle

CSS全宽滚动菜单

1 个答案: