CSS : 다중 열 드롭 다운

Question

jsFiddle : 나는 다중 열 드롭 다운 메뉴/위젯을 만들려고 해요 http://jsfiddle.net/4z2Vx/

.

왼쪽의 이미지가 내 웹 사이트에의는 jsFiddle 내부에 남아. 명백한 색상 + 글꼴 외에도 jsFiddle이 정렬을 변경하는 이유가 확실하지 않습니다. 이것은 문제가 아니며 문제는 첫 번째 열이 두 번째 열 아래에 숨겨져 있다는 것입니다 ... 몇 시간 동안 시도했지만 나란히 표시 할 수는 없습니다.

Answer 1

문제는 float이 작동하지 않습니다. n 절대적으로 위치 된 요소라면, 당신은 .first과 .second 위의 절대적으로 위치한 부모를 가지기 때문에 html을 재구성 할 수 있습니다 (griswoldo의 답). 또는 그들을 드롭 다운에 대한 폭을 설정 한 후 위치 :

.dropdown li ul { 
    display: none; 
    border:black 1px solid; 
    position:absolute; 
    background-color:white; 
    width: 150px; /*set the width*/ 
} 


.second { 
    left: 150px; /*set the position*/ 
}​ 

http://jsfiddle.net/tYeDk/

Answer 2

문제는 .dropdown의 리튬 UL 규칙에

position: absolute; 

것 같다. 그것을 제거한 다음 "모음집"링크를 ul 밖으로 이동하면 두 메뉴가 나란히 (그리고 "모음집"아래에) 표시됩니다. 또한, float을 left와 both로 설정해야합니다.

체크 아웃 나는 당신의 바이올린 짓이 빠른 모드 (완벽하지,하지만 난 당신이 여기에서 걸릴 수 있습니다 그림) : http://jsfiddle.net/4z2Vx/29/

Answer 3

가 좋아 내가 코드를 통과하고 megamenu의 종류를 필요로 이해했다. 귀하의 코드에서 ... 당신은 절대 하위 메뉴 ul을 독살했습니다. 이것이 플로팅을 무시하는 이유입니다. 당신은 그래서 당신의 HTML이

<div class="dropdown"> 
<ul id="menus"><li>Collections 
     <ul class="sub"> 
      <ul>   
      <li><a href="#">ABC/BBC</a></li> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Animated</a></li> 
      <li><a href="#">Children</a></li> 
      <li><a href="#">Documentary</a></li> 
      <li><a href="#">Drama</a></li> 
      <li><a href="#">Cult</a></li> 
    </ul> 
    <ul> 
      <li><a href="#">Family</a></li> 
      <li><a href="#">Fantasy</a></li> 
      <li><a href="#">Horror</a></li> 
      <li><a href="#">Lifestyle</a></li> 
      <li><a href="#">Mystery</a></li> 
      <li><a href="#">Reality</a></li> 
      <li><a href="#">Sciene fiction</a></li> 
     </ul> 
     </ul> 


</li> 
</ul> 
</div>​ 

줘야과 CSS를 사용하면 많은 UL를 추가 할 수 있습니다 이와

.dropdown 
{ 
    font-size:16px; 
    font-weight:400; 
    line-height:40px; 
    text-indent:15px; 
    padding-right:15px; 
    vertical-align:middle; 
    display:inline-block; 
} 

.dropdown:hover 
{ 
    background-color:green; 
} 

.dropdown li ul.sub { 
    display: none; 
    border:black 1px solid; 
    position:absolute; 
    background-color:white;  
} 

.dropdown ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

.dropdown a 
{ 
    display:block; 
    padding-right:15px; 
    line-height:30px; 
} 

.dropdown a:hover { 
    color: rgb(0,0,0); 
    text-decoration: underline; 
} 

.dropdown li:hover 
{ 
    background-color:green; 
} 

#menus ul.sub ul{ 
    float:left 
}​ 

될 것 yoru 절대

위치를 위해 아이를 만들 필요가 들어

원하는대로 ...