Question

我正在尝试创建一个水平导航，当您翻转根项目时，子页面及其子页面将显示在下面，但是采用3或4列布局。我已经尝试过css＆＃34;列数＆＃34;但它没有给我一致的结果。我想知道是否有人曾经遇到过这个问题或者能指出我正确的方向。

<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;
}

这是我的小提琴 fiddle

以下是我想要实现的一些例子。 4 column nav

enter image description here

Answer 1

嗯，基于你的JSFiddle，我假设你现在面临的问题是所有的子菜单都排列着导致它们出现的菜单项，你希望它们对齐只到左边。您可以通过删除<li>元素上的相对位置，并在子菜单上使用left:0将它们放在您想要的位置来实现此目的。

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

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

这里有一个JSFiddle来向您展示这种外观。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

我确信有很多方法可以通过大量不同的方案来解决这个问题 - 但这是我使用过的一种方法

#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的宽度。

@ http://jsfiddle.net/PqhEs/

组织起来有点不同 - 这完全取决于你想要如何在子子页面中对项目进行分组，现在他们只是继承子导航的样式，但你可以删除浮动并调整宽度使它们像示例一样列出。

HTML导航，下拉列表相等

2 个答案: