在相等列中具有下拉列表的HTML导航

我正在尝试创建一个水平导航，当您滚动根项目时，子页面及其子页面如下所示，但以3列或4列布局显示。我曾经尝试过css“列计数”，但它并没有给我一致的结果。我想知道是否有人曾经遇到过这个问题，或者可以为我指出正确的方向

<ul id="nav">
<li class="nonActive rootNav" id="rootNav1">
  <a href="/for-residents/">for Residents</a>

  <ul>
    <li><a href="/for-residents/history-of-smithville/">History of
    Smithville</a></li>

    <li><a href="/for-residents/mission-and-vision/">Mission and Vision</a></li>

    <li><a href="/for-residents/alerts/">Alerts</a></li>

    <li><a href="/for-residents/faqs/">FAQs</a></li>
  </ul>
</li>

<li class="nonActive rootNav" id="rootNav2">
  <a href="/for-business/">for Business</a>

  <ul>
    <li><a href="/for-business/film-commission/">Film Commission</a></li>

    <li><a href="/for-business/comprehensive-plan/">Comprehensive Plan</a></li>

    <li><a href="/for-business/chamber-of-commerce/">Chamber of Commerce</a></li>
  </ul>
</li>

<li class="nonActive rootNav" id="rootNav3">
  <a href="/our-community/">our Community</a>

  <ul>
    <li><a href="/our-community/calendar/">Calendar</a></li>

    <li><a href="/our-community/news/">News</a></li>

    <li><a href="/our-community/memorial-park-project/">Memorial Park
    Project</a></li>

    <li><a href="/our-community/city-maps/">City Maps</a></li>

    <li><a href="/our-community/airport/">Airport</a></li>
  </ul>
</li>

<li class="nonActive rootNav" id="rootNav4">
  <a href="/city-departments/">city Departments</a>

  <ul>
    <li><a href="/city-departments/police-department/">Police Department</a></li>

    <li><a href="/city-departments/fire-department/">Fire Department</a></li>

    <li><a href="/city-departments/parks-and-rec/">Parks and Rec</a></li>

    <li><a href="/city-departments/public-library/">Public Library</a></li>

    <li>
      <a href="/city-departments/utilities/">Utilities</a>

      <ul>
        <li><a href="/city-departments/utilities/pay-online/">Pay online</a></li>
      </ul>
    </li>

    <li><a href="/city-departments/public-works/">Public Works</a></li>
  </ul>
</li>

<li class="nonActive rootNav" id="rootNav5">
  <a href="/city-government/">city Government</a>

  <ul>
    <li>
      <a href="/city-government/city-council/">City Council</a>

      <ul>
        <li><a href=
        "/city-government/city-council/city-council-meeting-minutes/">City Council
        meeting minutes</a></li>
      </ul>
    </li>

    <li><a href="/city-government/city-manager/">City Manager</a></li>

    <li><a href="/city-government/city-staff/">City Staff</a></li>

    <li>
      <a href="/city-government/municipal-court/">Municipal Court</a>

      <ul>
        <li><a href="/city-government/municipal-court/municipal-judges/">Municipal
        Judges</a></li>

        <li><a href="/city-government/municipal-court/open-warrants/">Open
        Warrants</a></li>
      </ul>
    </li>
  </ul>
</li>
</ul>

body {
margin: 0px;
}
ul#nav {
margin: 0px;
padding: 0px;
}
ul#nav li {
list-style-type: none;
display: inline;
position: relative;
float: left;
}
ul#nav li a {
display: block;
padding: 10px;
background-color: #EAEAEA;
border: 1px solid #000000;
}
ul#nav li ul {
display: none;
position: absolute;
width: 750px;
margin: 0px 0px 0px -40px;
clear: both;
columns:200px 3;
-webkit-columns:200px 3; /* Safari and Chrome */
-moz-columns:200px 3; /* Firefox */
}
ul#nav li:hover ul {
display: block;
}
ul#nav li ul li {
clear: left;
display: block;
float: none;
}
ul#nav li ul li ul {
margin: 0px;
padding: 0px 0px 0px 10px;
position: relative;
}
ul#nav li ul li ul li {
clear: both;
display: block;
}

身体{
边际：0px；
}
ul#nav{
边际：0px；
填充：0px；
}
ul#nav li{
列表样式类型：无；
显示：内联；
位置：相对位置；
浮动：左；
}
ul#nav li a{
显示：块；
填充：10px；
背景色：#EAEAEA；
边框：1px实心#000000；
}
ul#nav li ul{
显示：无；
位置：绝对位置；
宽度：750px；
利润率：0px 0px 0px-40px；
明确：两者皆有；
色谱柱：200px-3；
-webkit列：200px 3；/*Safari和Chrome*/
-moz列：200px 3；/*Firefox*/
}
ul#nav li:悬停ul{
显示：块；
}
ul#nav li ul li{
清除：左；
显示：块；
浮动：无；
}
ul#nav li ul li ul{
边际：0px；
填充：0px 0px 0px 10px；
位置：相对位置；
}
ul#nav li ul li ul li{
明确：两者皆有；
显示：块；
}

这是我的小提琴

这里有几个例子说明我正在努力实现的目标。

---

Hm，基于您的JSFIDLE，我假设您现在面临的问题是，所有子菜单都与导致它们出现的菜单项对齐，并且您希望它们只与左侧对齐。您可以通过删除

元素上的相对位置，并在子菜单上使用

left:0

将它们放置在您想要的位置来实现这一点

因此，您的CSS调整如下所示：

ul#nav li {
    /* position:relative; */
}
ul#nav li ul {
    left:0;
}

---

这里有一张照片，让你看看那是什么样子。希望这有帮助！如果您有任何问题，请告诉我。

我相信有很多不同的方法可以解决这个问题，但这里有一种方法我曾经使用过

#nav {
    position: relative;
    float: left;
}
#nav > li {
    width: 20%;
}
ul, li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    width: 100%;
    float: left;
}
ul li a {
    display: block;
    padding: 10px;
    background-color: #EAEAEA;
    border: 1px solid #000000;
    text-decoration: none;
}
ul li ul {
    position: absolute;
    top: 40px;
    left: 0;
    display: none;
}
ul li:hover > ul {
    display: block;
}

/* The Rest for example purposes */

ul li ul li {
    width: 25%;
}
ul li ul li a {
    background: #ddd;
    border: none;
}

通过跳过第一个li子级上的相对定位，ul的第二级可以继承顶级ul的宽度

@

---

组织方式有点不同-这完全取决于您希望如何对子页面中的项目进行分组，现在在小提琴中，它们只是继承子导航的样式，但您可以删除浮动并调整宽度，使其如示例所示列出

因此，为了清楚起见，您希望在悬停时显示所有子菜单项，而不管悬停在哪个菜单项上？另外，仅供参考，为了在CSS中选择父菜单项的直接子菜单项，您必须使用

。所以做

ul#nav li ul li

和

ul#nav li ul li

是多余的（你只需要第二个）。第二个图像更准确地描述了我要做的事情。例如，在该图像中，城市部门被悬停在其上方，其下方的所有子页面都显示出来。在这种情况下，我建议创建两个单独的列表。第一个列表是主菜单，第二个列表是子菜单。当您将鼠标悬停在主菜单的任何部分上时，它将显示整个子菜单（默认情况下显示：无）。这样，你就不必做一些复杂的CSS魔术来让这些列播放得很好。是的，这样更好。但是子页面呢？试图弄清楚如何让他们可以访问。