帶有相同列的下拉列表的HTML Nav

Question

我試圖創建一個水平導航，當您翻轉根項目時，子頁面及其子頁面顯示在下面，但在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; 
} 

這裏是我的小提琴 fiddle

這裏是什麼，我想實現的幾個例子。

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/

舉辦了一點不同 - 這一切都取決於你想怎麼組項目在你的子子頁面，目前已經在擺弄他們只是繼承子導航的風格，但你可以刪除浮動和調整寬度讓他們像例子一樣列出。