1
이것은 내 previous question을 다시 요청하며 향후 실험 및 연구를 기반으로합니다. 가변 폭 디스플레이 : 파이어 폭스에서 테이블 셀이 자식 요소 너비를 깨뜨림
- 최상위 요소 :
Here is a model that works in IE, Safari and Chrome, and fails in Firefox 22.는 I는 다음과 같은 속성의 드롭 다운 탐색을 가지고 table-display : table-row 및 display : table-cell을 사용하면 하위 메뉴가 항상 동일한 수준으로 표시됩니다.
- 하위 메뉴는 상위 li과 동일한 너비의 UL 내에 있으며 더 넓은 하위 요소가 안에 위치합니다.
문제 : 디스플레이 : 테이블 셀 파이어 폭스의 최상위 LI의 폭의 하위 메뉴의 인식을 만 제거합니다. 그것은 그것을 시도한 모든 다른 단일 브라우저에서 작동합니다 (IE7은 허용되는 방식으로 중단됩니다).
디스플레이 삭제 : table-cell은 문제를 해결하지만 부모가 다른 높이의 하위 메뉴가 다른 높이에 나타나는 이전 문제를 다시 나타냅니다.
내가 찾고 있어요 중 하나
- 최상위 LI들에 동일한 높이를 확인하기위한 다른 방법
- 하위 메뉴 에 올바른 폭을 할당하는 파이어 폭스를 강제 할 수있는 방법
- Z- 색인은 하위 메뉴가 기본 가로 메뉴 막대 뒤에 표시되도록 수정하여 다른 높이에 나타나는 하위 메뉴의 경우가보기 싫어집니다.
크게 감사드립니다.
HTML
<div id="topnavblock">
<ul id="topnav">
<li><a href="#">Here is a top-level menu item</a>
<ul>
<ul class="navwrap3">
<li class="navwrap1">
<ul class="navwrap2">
<li><a href="#">Menu item 1</a></li>
<ul>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 2</a>
<ul>
<li>Third level nested menu</li>
</ul>
</li>
<li><a href="#">Sub-menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub-menu 3</a></li>
</ul><!--end navwrap2-->
</li> <!--end navwrap1-->
</ul><!--end navwrap3-->
</ul>
</li>
<li><a href="#">Here is a top-level menu item</a></li>
</ul>
</div>
CSS </li> 태그로 끝나지한다
#topnavblock {
width:100%;
position:relative;
display:table;
}
#topnav {
display:table-row;
}
#topnav > li {
max-width:100px;
display:table-cell;
vertical-align: middle;
border-right: 1px solid yellow;
}
ul#topnav li .navwrap1 {
background: yellow;
width: 210px;
position: relative;
}
ul#topnav li .navwrap2 {
background:grey;
}
ul#topnav > li > ul {
border-right: 3px solid red;
}
ul#topnav ul .navwrap3 {
border-left:3px solid green;
padding-top:60px;
}
ul#topnav .navwrap2 li {
float: none;
background:lightgreen;
width:100%;
}
ul#topnav li:hover ul {
visibility: visible;
}