하위 메뉴 항목이 상위 항목과 일치하지 않습니다.

드롭 다운 메뉴를 만들려고합니다.하지만 부모 메뉴 위로 마우스를 가져갈 때마다 하위 메뉴가 그 위에 정렬되지 않습니다. 나는 많은 예들을 겪어 왔고 나는 항상 같은 결과를 얻는다.하위 메뉴 항목이 상위 항목과 일치하지 않습니다.

내 CSS 코드가

#mainNav { 
    margin-top: 20px; 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0; 
    overflow: hidden; 
    background-color: #BBFFFF; 
    zoom: 1; 
} 

#mainNav li { 
    float: left; 
    list-style: none; 
} 
#mainNav li a { 
    color: #000000; 
    display: block; 
    width: 80px; 
    font-size: 14px; 
    text-align: center; 
    text-transform: uppercase; 
    text-decoration: none; 
    padding: 7px 0px 7px 0px; 
    border-right: 1px solid #999;  
    zoom: 1; 
} 
#mainNav li ul { 
    display: none; 
} 
#mainNav a:hover { 
    background-color: #66FF66; 
} 
#mainNav li:hover ul { 
    display: block; 
    position: absolute; 
} 
#mainNav li:hover li { 
    float: left; 
    width: 80px; 
    background-color: #BBFFFF; 
    margin: 0; 
    padding: 0; 
}

내 HTML은

<div> 
    <ul id="mainNav"> 
    <li><a href="pageone.html" id="pageOneLink">Page One</a></li> 
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li> 
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a> 
     <ul> 
     <li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

출처

2013-02-16 MorganJ

대신'display : block'을 사용하십시오.'display : inline-block' – asifsid88

코드를 게시 할 때 우리가 알 필요가없는 모든 것을 제거하는 것이 도움이됩니다. – sheriffderek

당신은 부정적인 다시 라인을 끌어 이익률은 왼쪽 사용할 수 있습니다. 추가 대상 :

#mainNav li:hover ul {}

또는 패딩을 설정할 수 있습니다 : 0; 같은 요소에 또한

, 당신은에 닫는 ' "'누락 :

<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>

출처

2013-02-16 19:13:15 Phil

복사 붙여 넣기를하면 도움이 될 것입니다이 예에서이 뭔가를 시도

<html> 
<head> 
<style type="text/css"> 
#mainNav{ 
    /* Your mainNav decoration here */ 

} 
#mainNav li{ 
    list-style:none; 
    display:inline-block; 
    background-color:#0FF; 
    padding:10px; 
    border:1px solid #000; 
} 

#mainNav ul{ 
    position:absolute; 
    display:none; 
    padding:0px; 
    top:50px; 
} 

#mainNav li:hover ul{ 
    display:inline-block; 
} 
</style> 
</head> 
<body> 

<ul id="mainNav"> 
    <li><a href="pageone.html" id="pageOneLink">Page One</a> 
    <br /> 
     <ul> 
     <li><a href="onePageOne.html" name="onePageOneLin">Sub Page One</a></li> 
     </ul> 
    </li> 
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li> 
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a> 
    <br /> 
     <ul> 
     <li><a href="threePageOne.html" name="threePageOneLin">Sub Page One</a></li> 
     </ul> 

    </li> 
    </ul> 

</body> 
</html>

출처

2013-02-16 19:40:05 harsh8888

CSS를 많이 있습니다.. 충분히 구체적이지 않은 물건과 잘못된 장소에있는 물건들

나는 여기 당신을 위해 jsfiddle을 작성했다 : A DISTILED VERSION OF YOUR CODE

당신은 그것이 속한 ul 대신에 li에리스트 스타일을 가지고 있습니다. 당신은 또한 하위 목록에 대해서도 충분히 구체적이지 않습니다.

.main-nav > li > a { }

는 리튬의 첫 번째 레이어를 대상으로 말할 것 같은> 사용하고, 그에서, 단지 그 리에서 등

나는 생각의 바이올린을보기 등 UL의 클래스를 줄 것이다 가장 간단한 방법입니다. 다른 사람들을 위해, 나의 피들이가 더 간결 할 수 있는지 알려주세요.

출처

2013-02-16 20:02:41 sheriffderek

또한 접근성을 위해 더 나은 접근 방법은 display : none 대신 0 또는 뭔가를 사용하는 것이라고 생각합니다. - 시각 장애인을위한 화면 판독기가 시각적으로 보이지 않더라도 텍스트를 읽을 수 있습니다. 실제로 높이 변화도 애니메이션으로 나타낼 수 있습니다. – sheriffderek

다음은 또 다른 피들입니다. 포크로 찍었으므로 아무 것도 표시하지 않고 높이 0으로 전환하는 드롭 다운을 표시하십시오. http://jsfiddle.net/sheriffderek/SvUcL/ – sheriffderek

하위 메뉴 항목이 상위 항목과 일치하지 않습니다.

답변

관련 문제