Сетка CSS Навигация по панели Стили Проблемы - PullRequest
Новая
       29

Сетка CSS Навигация по панели Стили Проблемы

0 голосов
/ 03 сентября 2018

Я хочу, чтобы в раскрывающейся панели навигации отображалось содержимое в разделе «О программе» в 3 столбцах с использованием CSS-сетки (как показано на рисунке ниже). Я хочу, чтобы содержимое «nav-first-col» находилось в первом столбце, содержимое «nav-second-col» - во втором столбце, а содержимое «nav-третьего-столбца» - в третьем. колонка. Тем не менее, независимо от того, что я пытаюсь, содержимое в разделе «О программе» отображается только в 1 столбце.

Picture of What I Want

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

1 Ответ

0 голосов
/ 03 сентября 2018 

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

Не очень знаком с системой сетки, но, похоже, это работает?

...