我想要一个包含一些团队名称的下拉列表。他们都直接往下走,但我希望他们每 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>