我正在尝试修复此导航。我想将“动物”（羊驼，水牛等）上的下拉列表分为2或3个部分，这样列表就不会太长。
代码如下：
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}
.wrapper {
width: 90%;
max-width: 1260px;
/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 480px;
/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
/*First remove all default margins and padding*/
nav,
ul,
li,
a {
padding: 0 0;
margin: 0 0
}
nav.navigate5 {
width: 100%;
padding: .5% 0;
background: #66e0ff;
float: left
}
/* hnavbar */
ul.hnavbar5 {
list-style: none;
font-size: 16px;
font-weight: bold;
margin-bottom: 0;
/* Clear floats */
float: left;
width: 100%;
position: relative;
z-index: 5;
}
ul.hnavbar5 li {
float: left;
margin-right: 10px;
position: relative;
}
ul.hnavbar5 a {
display: block;
padding: 5px;
color: #f2f2f2 !important;
background: #00ccff;
text-decoration: none;
border-radius: 5px;
box-shadow: 5px 5px 10px #000000;
}
ul.hnavbar5 a:hover {
color: white !important;
background: #00ccff;
text-decoration: none;
box-shadow: 3px 3px 6px #000000 inset;
}
/*--- DROPDOWN ---*/
ul.hnavbar5 ul,
ul.hnavbar5 li:hover ul li ul {
list-style: none;
position: absolute;
display: none;
}
ul.hnavbar5 ul li {
padding-top: 0px;
float: none;
}
ul.hnavbar5 ul a {
white-space: nowrap;
}
ul.hnavbar5 li:hover ul {
display: block;
left: 0;
z-index: 10;
}
ul.hnavbar5 li ul li:hover ul {
display: block;
top: 0;
left: 100%;
z-index: 10
}
ul.hnavbar5 li:hover a {
background: #00ccff !important;
text-decoration: none;
}
ul.hnavbar5 li:hover ul a {
text-decoration: none;
}
ul.hnavbar5 li:hover ul li a:hover {
background: #00ccff !important;
box-shadow: 3px 3px 6px #000000 inset;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<nav class="navigate5">
<ul class="hnavbar5">
<li><a href="index.php">Home</a></li>
<li><a href="#">Main Pages</a>
<ul>
<li><a href="animals.php">Animals</a>
<ul>
<li><a href="alpacas.php">Alpacas</a></li>
<li><a href="buffalo.php">Buffalo</a></li>
<li><a href="chickens.php">Chickens</a></li>
<li><a href="chinchillas.php">Chinchillas</a></li>
<li><a href="cows.php">Cows</a></li>
<li><a href="deer.php">Deer</a></li>
<li><a href="donkeys.php">Donkeys</a></li>
<li><a href="ducks.php">Ducks</a></li>
<li><a href="elk.php">Elk</a></li>
<li><a href="ferrets.php">Ferrets</a></li>
<li><a href="geese.php">Geese</a></li>
<li><a href="goats.php">Goats</a></li>
<li><a href="guinea_pigs.php">Guinea Pigs</a></li>
<li><a href="guineafowl.php">Guineafowl</a></li>
<li><a href="hedgehogs.php">Hedgehogs</a></li>
<li><a href="helpers.php">Helpers</a></li>
<li><a href="horses.php">Horses</a></li>
<li><a href="ostriches.php">Ostriches</a></li>
<li><a href="otters.php">Otters</a></li>
<li><a href="peacocks.php">Peacocks</a></li>
<li><a href="pheasants.php">Pheasants</a></li>
<li><a href="pigs.php">Pigs</a></li>
<li><a href="rabbits.php">Rabbits</a></li>
<li><a href="rams.php">Rams</a></li>
<li><a href="sheep.php">Sheep</a></li>
<li><a href="swans.php">Swans</a></li>
<li><a href="turkeys.php">Turkeys</a></li>
<li><a href="turtles.php">Turtles</a></li>
<li><a href="yak.php">Yak</a></li>
</ul>
</li>
<li><a href="certificates.php">Certificates</a></li>
<li><a href="consumables.php">Consumables</a></li>
<li><a href="crops.php">Crops and Produce</a></li>
<li><a href="deco.php">Decorations</a></li>
<li><a href="farm_upgrades.php">Farm Upgrades</a></li>
<li><a href="outfits.php">Outfits</a></li>
<li><a href="trees.php">Trees</a>
<ul>
<li><a href="flower_trees.php">Flower Trees</a></li>
<li><a href="fruit_trees.php">Fruit Trees</a></li>
<li><a href="nut_trees.php">Nut Trees</a></li>
<li><a href="other_trees.php">Other Trees</a></li>
<li><a href="special_trees.php">Special Trees</a></li>
<li><a href="wood_trees.php">Wood Trees</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="themes.html">Themes</a></li>
<li><a href="#">Crafted Items</a>
<ul>
<li><a href="all.php">All Crafting Buildings</a></li>
<li><a href="kiln.php">Kiln Only</a></li>
<li><a href="kitchen.php">Kitchen Only</a></li>
<li><a href="workshop.php">Workshop Only</a></li>
</ul>
</li>
<li><a href="#">Indexes</a>
<ul>
<li><a href="alphabetical.php">Alphabetical Index</a></li>
<li><a href="reverse.php">Reverse Lookup</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
我想做的就是保持这种设计，但是将动物部分放下2或3列，这样就不会太长了。现在很长。我不确定这是否会有所作为，但是此导航将在php页面上。
可以看到here的当前布局。
仅需注意，这只是一个临时站点，用于修复问题而不中断将要使用它的站点。
答案 0 :(得分：1)
只需为此创建一个特定的css：
ul.cols-2 {
columns: 2;
column-gap: .1em;
}
并添加此类，如下所示：
<ul class="cols-2" >
<li><a href="alpacas.php">Alpacas</a></li>
<li><a href="buffalo.php">Buffalo</a></li>
<li><a href="chickens.php">Chickens</a></li>
...