ul div가 부모를 밀어 내고 있습니다.

Question

ul div에 문제가 있습니다. ul에 대한 부모 div가 들어 있지 않습니다. 부모 div (subMenu)가 있고 z 인덱스가 있지만 ul 하위 (subMen)는 그 아래에 표시됩니다. 부모님을 찾고 부모님에게 적용한 위치로 끌어 올렸습니다. 내가 부동 및 목록 스타일의 위치를 ​​시도했습니다. 그러나 아무것도 중요하지 않습니다. 다음은 CSS 코드입니다.

#subMenu { 
background-image: url(images/sub_nav_background2.png); 
width: 1280px; 
height: 60px; 
position: relative; 
top: -145px; 
z-index: -100; 
} 

#subMen { 
margin-left: 330px; 
list-style-position: inside !important; 
float: left !important; 
height: 20px; 
width: 900px !important; 
font-size: 14px; 

} 

여기에 관련된 HTML 섹션이 있습니다.

<div id="subMenu"> 
     <ul id="subMen"> 
     <li><a href="#">BRAND MARKETING</a></li> 
     <li><a href="#">EXPERIENTIAL MARKETING</a></li> 
     <li><a href="#">PERFORMANCE SOLUTIONS</a></li> 
     <li><a href="#">MEETING & EVENT SOLUTIONS</a></li> 
     </ul> 
     </div> 
<div class="clearfix"></div> 

그리고 여기에 어떤 일이 일어나고 있는지 IMAGE입니다.

하단에 나열된 메뉴는 회색 영역에 있어야하며 상단의 기본 탐색 메뉴 아래에 있어야합니다.

Answer 1

무언가를 뜨면 부모 div를 벗어날 수 있습니다. 부모에게 overflow 속성을 추가해야합니다. overflow: hidden을 지정하면 오버플로가 숨겨집니다. overflow: scroll이 스크롤됩니다.

예제 : http://jsfiddle.net/BZFTY/2/.

위의 바이올린에서 오버플로 속성을 다른 값 : default, scroll 및 hidden으로 변경해보십시오.

Answer 2

나는 코드를 기반으로 한 바이올린을 만들었습니다. 나는 창에서 텍스트를 볼 필요가 있었기 때문에 -145px :

http://jsfiddle.net/wby6W/1/

#subMenu { 
background:#ccc; 
width: 1280px; 
height: 60px; 
position: relative; 
z-index: -100; 
overflow:hidden; 
} 

#subMen { 
margin-left: 330px; 
float: left; 
width: 900px; 
font-size: 14px; 
} 

나는 상단을 제거했습니다. 위에서 제안한대로 overflow : hidden을 CSS에 추가했습니다.

Answer 3

당신은

list-style-position:inside;