메뉴의 절대 및 상대 위치
물기
우리는 모두 절대 div를 배치하는 데 어려움을 겪습니다. : S 내 경우에는이 CSS가있는 수평 하위 메뉴 :
ul.children{
display:none;
position:absolute;
}
ul.children li{
position:relative;
height:60px;
float:none;
}
li.page_item_has_children:hover > ul.children{
display:inline;
}
사진에서 볼 수 있듯이 전체 하위 메뉴가 부모 너비의 50 % 왼쪽으로 이동합니다. 모든 것을 시도하고 더 큰 엉망인 xD를 만들었습니다.
그래서 누구든지 이것으로 나를 도울 수 있다면 나는 매우 감사 할 것입니다 :)
HTML :
<li class="page_item page-item-2 page_item_has_children">
<a href="url">About</a>
<ul class='children'>
<li class="page_item page-item-39">
<a href="url">About</a></li>
<li class="page_item page-item-41">
<a href="url">Contact us</a></li>
</ul>
</li>
나는 그것의 wordpress 테마를 일으키는 html을 바꿀 수 없다 : S
Erier
다음과 같이 시도하십시오.
ul {
list-style-type: none;
padding: 0;
}
.page_item_has_children {
position: relative;
}
ul.children {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
min-width: 200px; /* or whatever makes sense */
}
ul.children li {
height: 60px;
}
.page_item_has_children:hover > ul.children {
display: block;
}
여기서 중요한 부분은 'page_item_has_children'요소가 상대적으로 배치되고 자식 'ul'이 절대 위치에 있는지 확인하는 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
메뉴의 절대 및 상대 위치
- 2
상대 및 절대 위치 문제
- 3
오버플로 숨김 및 절대 메뉴 위치
- 4
메뉴 숨기기 및 페이지의 모든 항목의 절대 위치 수행
- 5
IntersectionObserver 및 위치 : 절대
- 6
반응 형 절대 위치 메뉴
- 7
반응 형 절대 위치 메뉴
- 8
위치 절대 div 및 요소의 중심 위치
- 9
상대 위치 내부의 절대 위치?
- 10
상대 및 절대 위치와 함께 Z- 색인 사용
- 11
한 요소에서 절대 및 상대 위치?
- 12
절대 및 상대
- 13
위치 절대 및 하위 0
- 14
CYGWIN의 절대 및 상대 경로
- 15
jquery의 절대 및 상대 경로
- 16
IFC의 절대 벽 위치
- 17
절대 div의 위치 지정 및 고정 스크롤 문제
- 18
고정 및 절대 위치 div 아래의 텍스트
- 19
이제 절대 위치의 메뉴가 전체 너비로 표시됩니다.
- 20
여백이있는 단일 행 반응 형 메뉴 : 0 자동 및 절대 위치
- 21
여백이있는 단일 행 반응 형 메뉴 : 0 자동 및 절대 위치
- 22
CSS, 절대 위치 및 추가 픽셀
- 23
CSS 상대 위치와 절대 위치
- 24
절대 위치로 KendoUI 설정 상단 및 왼쪽
- 25
CSS 또는 Jquery를 사용하여 데스크톱의 경우 절대 위치 및 모바일의 경우 상대 위치에 두 블록 배치
- 26
상위 메뉴의 위치 및 너비 가져 오기
- 27
상대 부모의 맨 아래에 절대 위치 div
- 28
상대 위치보다 절대적 사용의 이점?
- 29
절대 위치 상속
몇 마디 만하겠습니다