CSS3 드롭 다운 메뉴 정렬

Question

디스플레이 및 위치에 대한 다양한 설정을 시도했지만 미래의 드롭 다운 메뉴에서 하위 항목을 정렬하는 방법을 모르겠습니다. 그것들은 다른 메뉴 아이템들과 겹쳐지며 그들이 있어야하는 장소에 머 무르지 않습니다. 불행히도 this question + answer도 나를 도울 수 없습니다.

이 내 CSS 코드 : 나는이

#menu ul li a + #menu ul li ul li a { } 

li.page_item > li.page_item { } 

같은 결합 선택기을 시도

#menu ul li a { 
text-decoration: none; 
background-color: #FF0000; 
font-size: 16px; 
margin: 10px 5px 10px 5px; 
display: block; 
float: left; 
position:relative; } 

#menu ul li a:hover { 
background-color: #0000FF; } 

#menu ul li ul li a { 
clear: left; 
background-color: #6F0; 
font-size: 10px; 
display: block; 
position: absolute; } 

하지만이 중 하나가 작동하지 않았다.

편집 : 다음은 일부 HTML/PHP 코드입니다. 지금은

  <div id="menu" role="navigation"> 
      <?php /* Navigation menu. */ ?> 
      <?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu-class', 
            'container_id' => 'main-menu-id', 'theme_location' => 'header', 'show_home' => true)); ?> 
     </div> <!-- menu --> 

그리고 렌더링 된 HTML 코드는 ... 나는 그 전에 언급해야 워드 프레스 템플릿 생각하는 것 :

<div id="menu" role="navigation"> 
<div class="menu"> 
<ul> 
<li class="current_page_item"> 
<a title="Home" href="http://mywebsite.com/wordpress/">Home</a> 
</li> 
<li class="page_item page-item-40"> 
<a href="http://mywebsite.com/wordpress/?page_id=40">Cupcake Ipsum</a> 
<ul class="children"> 
<li class="page_item page-item-388"> 
<a href="http://mywebsite.com/wordpress/?page_id=388">Red Velvet Cupcake</a> 
</li> 
<li class="page_item page-item-390"> 
<a href="http://mywebsite.com/wordpress/?page_id=390">Mango Cupcake</a> 
</li> 
<li class="page_item page-item-392"> 
<a href="http://mywebsite.com/wordpress/?page_id=392">Chocolate Cupcake</a> 
</li> 
</ul> 
</li> 
<li class="page_item page-item-43"> 
<a href="http://mywebsite.com/wordpress/?page_id=43">Bacon Ipsum</a> 
<ul class="children"> 
<li class="page_item page-item-405"> 
<a href="http://mywebsite.com/wordpress/?page_id=405">Bacon Pancakes</a> 
</li> 
</ul> 
</li> 
<li class="page_item page-item-45"> 
<a href="http://mywebsite.com/wordpress/?page_id=45">Veggie Ipsum</a> 
<ul class="children"> 
<li class="page_item page-item-397"> 
<a href="http://mywebsite.com/wordpress/?page_id=397">Tomato</a> 
</li> 
<li class="page_item page-item-399"> 
<a href="http://mywebsite.com/wordpress/?page_id=399">Lettuce</a> 
</li> 
<li class="page_item page-item-401"> 
<a href="http://mywebsite.com/wordpress/?page_id=401">Broccoli</a> 
</li> 
<li class="page_item page-item-403"> 
<a href="http://mywebsite.com/wordpress/?page_id=403">Onion</a> 
</li> 
</ul> 
</li> 
</ul> 
</div> 
</div> 

Answer 1

. http://jsbin.com/aloreh/1/edit

귀하의 일반적인 문제는 잘못된 것들에 position: absolute 및 position: relative을 옮기고 있다는 것입니다 :

#menu ul li a { 
    float: none; /* no need for float */ 
} 

#menu ul li ul li a { 
position: static; /* no need for absolute positioning here */ 
} 

.menu ul li { 
    display: inline-block; 
    position: relative; 
} 

.menu li ul { 
position: absolute; 
} 

.menu li:not(:hover) ul { 
display: none; 
} 

그리고 여기에는 데모입니다. 모든 링크 스타일을 실제 링크 요소에 적용하는 것이 좋지만 목록 및 목록 항목에 위치 지정을 적용해야합니다.

따라서 첫 번째 수준의 목록 항목은 position: relative이어야합니다. 이렇게하면 하위 메뉴를 첫 번째 수준 항목에 상대적으로 배치 할 수 있습니다. 그러면 보조 메뉴 ul에는 position: absolute이 표시되므로 페이지가 표시 될 때 페이지가 리플 로우되지 않습니다.

Answer 2

당신은 요소를 절대 위치를주는 경우에

position: absolute; 

페이지에 표시 할 위치를 명시 적으로 알리기 전까지는 어디로 가야할지 알 수 없습니다.

변경 당신이 원하는 것을 할 때까지이 바이올린 : 나는 중복 문제를 해결하기 위해 CSS를 일부 변경 한 http://jsfiddle.net/hillsons/LUqpM/