동일한 열의 드롭 다운이있는 HTML 탐색

Question

루트 항목을 롤오버 할 때 하위 페이지와 하위 페이지는 아래에 표시되지만 3 또는 4 열 레이아웃으로 표시되는 가로 탐색을 만들려고합니다. 나는 css "column count"를 실험했지만 일관된 결과를주지 못했다. 나는 누군가가 전에 이것을 건너 왔는지 또는 올바른 방향으로 나를 가리킬 수 있는지 궁금해하고 있습니다.

<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

입니다. 당신의 JSFiddle에 따라

Answer 1

흠, 난 당신이 지금 직면하고있는 문제는 하위 메뉴의 모든 그들 표시됩니다 메뉴 항목에 줄 지어 있다는 것입니다 가정하고있어 당신은 그것들을 왼쪽에만 정렬시키고 싶습니다. <li> 요소의 상대 위치를 제거하고 하위 메뉴에서 left:0을 사용하여 원하는 위치에 배치하여이 작업을 수행 할 수 있습니다.

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

여기 어떻게 모습을 보여주기 위해 JSFiddle있어 : 같은

그래서, 당신의 CSS 조정이 보일 것이다. 희망이 도움이! 궁금한 점이 있으면 알려주세요.

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

와 함께 일 한 가지 방법은, 두 번째입니다 ul의 레벨은 최상위 레벨 ul의 너비를 상속받을 수 있습니다. http://jsfiddle.net/PqhEs/

는 다르게 조금의 구성

@ - 그것은 모두 당신이 그들은 단지 하위 탐색의 스타일을 상속 바이올린에 지금, 당신의 부 서브 페이지에 그룹 항목에 싶어 방법에 따라 달라집니다,하지만 당신은 할 수 플로트를 제거하고 너비를 조정하여 예제와 같이 나열하십시오.