CSS全宽滚动菜单

我一直在尝试复制www.sklz.com的顶部菜单，但只使用CSS，不使用JS。我设法做到了99%，但我被一个小错误卡住了。当菜单居中时，我似乎无法将下拉部分放在导航栏下方（因此，在它下降到下方之前，您无法看到它），而是停留在下一个div（本例中为黄色栏）上方。每当我尝试使用z索引等时，它要么将下拉列表放在黄色栏后面，要么放在导航栏上方。

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

1）黄色条2）下拉内容3）导航栏（黑色100%宽栏）4） Nav（下拉菜单文本）

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;
}

<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>

您可以在最大高度属性上设置转换。更改这两个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

相关内容

最新更新

热门标签：