서브 메뉴 서브 메뉴 서브 메뉴

Question

필자는 아직 코딩에 비교적 익숙하지 않기 때문에 쉽게 수정할 수 있습니다. 기본 메뉴 항목 중 두 가지 아래에 5 개의 메뉴 항목과 하위 메뉴 항목이있는 메뉴를 설정했습니다. 첫 번째 하위 메뉴와 그 메뉴 항목을 정렬하면 두 번째 메뉴 항목이 너무 오른쪽입니다. 두 번째 하위 메뉴와 그 메뉴 항목을 정렬하면 첫 번째 하위 메뉴 항목이 너무 오른쪽입니다. 각 하위 메뉴 항목 아래에 하위 메뉴를 모두 만들 수있는 방법이 있습니까? 여기

는 HTML입니다 :

<ul id="menu"> 
    <li><a href="http://kerryaltmantest.info">Home</a></li> 
    <li><a href="http://kerryaltmantest.info/aboutme.html">About Me</a> 
     <ul> 
      <li><a href="http://kerryaltmantest.info/fpa.html">Fairfax Psychological Associates</a></li> 
      <li><a href="http://kerryaltmantest.info/credentials.html">Credentials</a></li> 
     </ul></li> 
    <li><a href="http://kerryaltmantest.info/publications.html">Publications</a> 
     <ul> 
      <li><a href="http://kerryaltmantest.info/w5m.html">The Wisdom of the Five Messengers</a></li> 
      <li><a href="http://kerryaltmantest.info/otherpublications.html">Other Publications</a></li> 
     </ul></li> 
    <li><a href="http://kerryaltmantest.info/location.html">Location</a></li> 
    <li><a href="http://kerryaltmantest.info/strategicinteractions.html">Strategic Interactions</a></li> 

그리고 이것은 CSS입니다 : 당신은 내가 하위 메뉴에 대해 무엇을 의미하는지보고 싶어

#menu { 
width: 950px; 
height:35px; 
font-size: 20px; 
font-family: cambria, Georgia, sans-serif; 
font-weight: bold; 
text-align: center; 
background-color: #FFF; 
border-radius: 0px; 
margin-top: -175px; 
margin-left: 25px; 
} 

#menu li { 
display: inline; 
padding: 10px; 
} 

#menu a { 
text-decoration: none; 
color: #2B297F; 
padding: 10px 10px 10px 10px; 
} 

#menu a:hover { 
color: #2B297F; 
background-color: #999; 
} 

#menu li ul 
{font-size:15px; 
margin-left:-160px; 
margin-top:25px; 
position:absolute; 
text-align:left; 
display:none;} 

#menu li:hover ul 
{display:inline-block; 
} 

#menu li li 
{list-style:none; display:list-item;} 

#menu li li a 
{color:#2B297F; text-decoration:none;white-space:nowrap; 
} 

#menu li li a:hover 
{color:#2B297F; background-color: #999 text-decoration:none;} 

이 사이트는 http://kerryaltmantest.info이다. 고맙습니다!

Answer 1

할 필요가 CSS에 몇 가지 변화가 있습니다

#menu li ul { 
    font-size: 15px; 
    /* margin-left: -160px; REMOVE */ 
    /* margin-top: 25px; REMOVE */ 
    position: absolute; 
    text-align: left; 
    top: 30px; /* add this */ 
    left: 0; /* add this */ 
    padding: 0 /* add this */ 
    display: none; 
} 

#menu li { 
    display: inline; 
    padding: 10px; 
    position: relative; /* add this */ 
} 

ul가 제대로 배치되지 않는 것은 li 때문에이 위치 스타일이 설정되지 않은에 포함되어있는 것을 가장 큰 이유. 이 경우 절대 위치 요소는 위치 유형이 설정된 첫 번째 조상에 따라 배치됩니다. 또한, ul에 포지셔닝 규칙 (top/left/bottom/right)이 설정되어 있지 않으므로이 기능이 실제로 적용되지 않았습니다. 이 두 가지를 추가하고 여백/패딩을 재설정하면 문제가 해결되었습니다 (css는 Chrome의 디버거에서 직접 편집/디버깅 할 수 있음).

https://developer.mozilla.org/en-US/docs/Web/CSS/position

:

절대 위치 상대적 위치 여전히 의 문서 요소의 정상 유동 것으로 간주

요소. 반대로, 절대적으로 배치 된 요소 은 다른 요소를 배치 할 때 을 차지하지 않습니다. 절대 위치에있는 요소는 가장 가까운 위치에있는 조상에 상대적으로 배치됩니다. 위치 된 조상 인 이 없으면 초기 컨테이너가 사용됩니다.

크롬 디버깅 정보는 :