페이지가 스크롤 될 때만 갭이 드롭 다운 내비게이션에 나타납니다.

Question

저는 최근에 첫 번째 웹 사이트를 구축했으며 (많은 시행 착오를 거쳐) 처음 페이지를 조금 아래로 스크롤하면 내비게이션을 클릭하면 드롭 다운을 클릭 할 수 없습니다. 나는 그것을 고치려고 미쳐 가고있다. 아무도 도와 줄 수 있습니까? 사이트는 다음 위치에 있습니다. http://lamplighters.org/education/smw.html

Answer 1

CSS에서 요소와 함께 설정되는 위치 문제인 것으로 보입니다. html과 css 코드를 보는 것이 도움이 될 것입니다.

Answer 2

나는 당신이 position: fixed을 사용했다는 사실과 관련이 있다고 말할 수 있습니다. CSS에 대한 일련의 다른 문제도 있습니다.

Answer 3

나는 페이지를 inspeceted하고 탐색을 위해 잘 오지 않았던 많은 것들을 발견했다. 좋은 관리는 순서에 있지 않습니다.

#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul*/ 
padding: 0; 
margin: 0; 
list-style: none; 
line-height: 1; 
text-align: center; 
} 
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul. This is redundant and should be consolodated into a single #nav, #nav ul, if you are going to use these assigned attributes. */ 
padding: 0; 
margin: 0; 
list-style: none; 
display: inline-block; 
} 
ul {/*By doing this you are only targeting any ul on the page*/ 
list-style: none outside; 
} 
ul, ol {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/ 
margin-bottom: 20px; 
} 
ol, ul {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/ 
list-style: none; 
} 

#nav li { 
float: left; 
width: 137px; 
text-transform: capitalize; 
display: inherit; 
position: relative; 
} 
li { 
line-height: 18px; 
margin-bottom: 12px; 
} 

네비게이션 CSS를 깨끗이 닦고 처음부터 시작할 수 있습니다. 나는 CSS 파일을 가져와 아래에 넣었다. 이것이 도움이되기를 바랍니다. 앞으로 귀하의 sytle 시트와 행운을 빌어 요.

#menu{ 
    width: 960px; 
    margin: 50px 0 0 0; 
    padding: 10px 0 0 0; 
    list-style: none; 
} 

#menu li{ 
    float: left; 
    padding: 0 0 10px 0; 
    position: relative; 
} 

#menu a{ 
    float: left; 
    height: 25px; 
    padding: 0 60px; 
    text-decoration: none; 
} 
/*Text Color for the anchors*/ 
#menu li:hover > a{ 
    color: #FFFFFF; 
} 

*html #menu li a:hover{ /* IE6 */ 
    color: #FFFFFF; 
} 

#menu li:hover > ul{ 
    display: block; 
} 



/* Sub-menu */ 

#menu ul{ 
    list-style: none; 
    margin: 0 35px; 
    padding: 0 15px; 
    display: none; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    z-index: 99999; 
} 

#menu ul li{ 
    float: none; 
    margin: 0; 
    padding: 0; 
    display: block; 
} 

#menu ul a{  
    padding: 10px; 
    height: auto; 
    line-height: 1; 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 

*html #menu ul a{ /* IE6 */ 
    height: 10px; 
    width: 150px; 
} 

*:first-child+html #menu ul a{ /* IE7 */ 
    height: 10px; 
    width: 150px; 
} 

#menu ul a:hover{ 
    /*add a background position*/ 
    background-position: left top; 
} 

#menu ul li:first-child a{ 
} 

#menu ul li:first-child a:after{ 
    content: ''; 
    position: absolute; 
    left: 30px; 
    top: -8px; 
    width: 0; 
    height: 0; 
} 

#menu ul li:first-child a:hover:after{ 
    /*add color scheme*/ 
} 

#menu ul li:last-child a{ 
} 



/* Clear floated elements */ 
#menu:after{ 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

* html #menu    { zoom: 1; } /* IE6 */ 
*:first-child+html #menu { zoom: 1; } /* IE7 */