我想让我的导航栏下拉列表使用CSS Grid在3列中的“关于”下显示内容(如下图所示)。我希望“nav-first-col”中的内容位于第一列,“nav-second-col”中的内容位于第二列,“nav-third-col”中的内容位于第三列柱。但是,无论我尝试什么,“关于”下的内容似乎只显示在1列中。
.nav-bar-main-menu .dropdown:nth-child(2) ul li{
display: grid;
grid-template-columns: 150px 150px 150px;
grid-auto-rows: auto;
grid-gap: 1em;
}
.nav-first-col{
grid-column: 1 ;
}
.nav-second-col{
grid-column: 2 ;
}
.nav-third-col{
grid-column: 3 ;
}
<div class="nav-bar-main-menu">
<div class="dropdown">
<button class="dropbtn"><a href="#">HOME</a></button>
</div>
<div class="dropdown">
<button class="dropbtn">PROJECT</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">HUMAN-CENTERED DESIGN</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">OUTREACH</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">ABOUT</button>
<div class="dropdown-content">
<ul>
<div class="nav-first-col">
<li><a href="#">WET LAB</a>
<ul>
<li><a href="http://2017.igem.org/Team:Cornell/Proof">HYDROSENSE</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Parts">PARTS</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Protocol">PROTOCOLS</a></li>
</ul>
</li>
<li><a href="#">PRODUCT DEVELOPMENT</a>
<ul>
<li><a href="http://2017.igem.org/Team:Cornell/productdevoverview">OVERVIEW</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Hardware">OXYPONICS SYSTEM</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Software">DASHBOARD</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Design">DESIGN PROCESS</a></li>
</ul>
</li>
</div>
<div class = "nav-second-col">
<li><a href="#">MATHEMATICAL MODELING</a>
<ul>
<li><a href="http://2017.igem.org/Team:Cornell/Model">MODELING</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Animation">ANIMATION</a></li>
</ul>
</li>
</div>
<div class = "nav-third-col">
<li><a href="#">DOCUMENTATION</a>
<ul>
<li><a href="http://2017.igem.org/Team:Cornell/Notebook">NOTEBOOK</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Safety">SAFETY</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">TEAM</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
.nav-bar-main-menu .dropdown:nth-child(2) ul li{
display: grid;
grid-template-columns: 150px 150px 150px;
grid-auto-rows: auto;
grid-gap: 1em;
}
.nav-first-col{
grid-column: 1 ;
display: inline-grid;
}
.nav-second-col{
grid-column: 2 ;
display: inline-grid;
}
.nav-third-col{
grid-column: 3 ;
display: inline-grid;
}
<div class="nav-bar-main-menu">
<div class="dropdown">
<button class="dropbtn"><a href="#">HOME</a></button>
</div>
<div class="dropdown">
<button class="dropbtn">PROJECT</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">HUMAN-CENTERED DESIGN</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">OUTREACH</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">ABOUT</button>
<div class="dropdown-content">
<ul>
<div class="nav-first-col">
<li><a href="#">WET LAB</a>
<ul>
<li><a href="http://2017.igem.org/Team:Cornell/Proof">HYDROSENSE</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Parts">PARTS</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Protocol">PROTOCOLS</a></li>
</ul>
</li>
<li><a href="#">PRODUCT DEVELOPMENT</a>
<ul>
<li><a href="http://2017.igem.org/Team:Cornell/productdevoverview">OVERVIEW</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Hardware">OXYPONICS SYSTEM</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Software">DASHBOARD</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Design">DESIGN PROCESS</a></li>
</ul>
</li>
</div>
<div class = "nav-second-col">
<li><a href="#">MATHEMATICAL MODELING</a>
<ul>
<li><a href="http://2017.igem.org/Team:Cornell/Model">MODELING</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Animation">ANIMATION</a></li>
</ul>
</li>
</div>
<div class = "nav-third-col">
<li><a href="#">DOCUMENTATION</a>
<ul>
<li><a href="http://2017.igem.org/Team:Cornell/Notebook">NOTEBOOK</a></li>
<li><a href="http://2017.igem.org/Team:Cornell/Safety">SAFETY</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">TEAM</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
不是很熟悉网格系统,但这似乎有用吗?