下拉菜单列表太大

问题描述 投票:0回答:0

我想要一个包含一些团队名称的下拉列表。他们都直接往下走,但我希望他们每 10 个团队挨着走。我试过弄乱边距,但它不是很有用。

任何帮助将不胜感激。如果有人可以,我想把它做成很像NBA官网https://www.nba.com/

以下代码:

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

nav ul li:hover > ul {
  display: block;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
}

nav ul .menu-1 {
  margin-left: 0px;
}

nav ul .menu-2 {
  margin-left: 88px;
}

nav ul .menu-3 {
  margin-left: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pliroforiki</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav>
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Standings</a>
          <ul>
            <li>
              <a href="#">Eastern Conference</a>
            </li>
            <li>
              <a href="#">Western Conference</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Teams</a>
          <ul class="menu-1">
            <li>
              <a href="#">Atlanta Hawks</a>
            </li>
            <li>
              <a href="#">Boston Celtics</a>
            </li>
            <li>
              <a href="#">Brooklyn Nets</a>
            </li>
            <li>
              <a href="#">Charlotte Hornets</a>
            </li>
            <li>
              <a href="#">Chicago Bulls</a>
            </li>
            <br />
            <br />
            <li>
              <a href="#">Cleveland Cavaliers</a>
            </li>
            <li>
              <a href="#">Dallas Mavericks</a>
            </li>
            <li>
              <a href="#">Denver Nuggets</a>
            </li>
            <li>
              <a href="#">Detroit Pistons</a>
            </li>
            <li>
              <a href="#">Golden State Warriors</a>
            </li>
          </ul>
          <ul class="menu-2">
            <li>
              <a href="#">Houston Rockets</a>
            </li>
            <li>
              <a href="#">Indiana Pacers</a>
            </li>
            <li>
              <a href="#">LA Clippers</a>
            </li>
            <li>
              <a href="#">Los Angeles Lakers</a>
            </li>
            <li>
              <a href="#">Memphis Grizzlies</a>
            </li>
            <br />
            <br />
            <li>
              <a href="#">Miami Heat</a>
            </li>
            <li>
              <a href="#">Milwaukee Bucks</a>
            </li>
            <li>
              <a href="#">Minnesota Timberwolves</a>
            </li>
            <li>
              <a href="#">New Orleans Pelicans</a>
            </li>
            <li>
              <a href="#">New York Knicks</a>
            </li>
          </ul>
          <ul class="menu-3">
            <li>
              <a href="#">Oklahoma City Thunder</a>
            </li>
            <li>
              <a href="#">Orlando Magic</a>
            </li>
            <li>
              <a href="#">Philadelphia 76ers</a>
            </li>
            <li>
              <a href="#">Phoenix Suns</a>
            </li>
            <li>
              <a href="#">Portland Trail Blazers</a>
            </li>
            <br />
            <br />
            <li>
              <a href="#">Sacramento Kings</a>
            </li>
            <li>
              <a href="#">San Antonio Spurs</a>
            </li>
            <li>
              <a href="#">Toronto Raptors</a>
            </li>
            <li>
              <a href="#">Utah Jazz</a>
            </li>
            <li>
              <a href="#">Washington Wizards</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Playoffs</a>
        </li>
        <li>
          <a href="#">Players</a>
        </li>
      </ul>
    </nav>
  </body>
</html>

html list drop-down-menu menu html-lists
© www.soinside.com 2019 - 2024. All rights reserved.