CSS의 드롭 다운 메뉴가 페이지 내용 아래에 표시됩니다.

Question

나는이 문제에 대한 몇 시간의 연구를 수행했지만 작동시키지 못했습니다! 마침내 내 CSS 메뉴를 정확히보고 싶습니다. 예. 예. 그러나 이제는 페이지의 다른 내용 아래로 떨어지며, 어떻게 페이지를 위로 올릴 수 있는지 알 수 없습니다. 내가 언급 한 많은 사람들이 포지셔닝을 조정했고 아무런 효과없이 2000 년까지 Z- 인덱스 설정을 끝까지 설정했습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?? Firefox 사용 - 현재 버전. (사이트가 아직 게시되지 않는, 그리고 아니, 내가 예를 보여줄 수있는 링크가없는) 여기

는 CSS 코드

#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after { 

    content: ''; 
    display: table; 

} 


#cssmenu:after, #cssmenu > ul:after { 

    clear: both; 

} 
#cssmenu 
{ 
    zoom: 1; 
} 

#cssmenu > ul 
{ 
    background: #00305f; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#cssmenu > ul li 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 

} 

#cssmenu > ul > li 
{ 
    float: left; 
    position: relative; 
} 

#cssmenu > ul > li > a 
{ 
    padding: 20px 25px; 
    display: block; 
    color: white; 
    font-family: Georgia, Times, Serif; 
    font-size: 20px; 
    text-transform: capitalize; 
    text-decoration: none; 
    text-shadow: 0 -1px 0 rgba(151, 99, 33, .43); 
    line-height: 18px; 
} 

#cssmenu > ul > li:hover > a 
{ 
    background: #5783af; 

} 

#cssmenu > ul > li > a > span 
{ 
    line-height: 18px; 
} 

#cssmenu > ul > li.active > a 
{ 
    background: #5783af; 
} 

#cssmenu > ul > li > a:active 
{ 
    background: #5783af; 
} 

#cssmenu > ul ul 
{ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 120px; 
    background: #00305f; 
    margin: 0; 
    padding: 0; 
    z-index: 2000; 
    -webkit-transition: all .35s .2s ease-in-out; 
    -moz-transition: all .35s .2s ease-in-out; 
    -ms-transition: all .35s .2s ease-in-out; 
    transition: all .35s .2s ease-in-out; 
} 

#cssmenu > ul li:hover ul 
{ 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
    color: #5783af; 
    z-index: 2000; 
    top: 64px; 
    left: 0; 
} 

#cssmenu > ul ul:before 
{ 
    content: ''; 
    position: absolute; 
    top: -10px; 
    width: 100%; 
    height: 16px; 
    background: transparent; 
} 

#cssmenu > ul ul li 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 

#cssmenu > ul ul li a 
{ 
    padding: 12px 20px; 
    display: block; 
    color: white; 
    font-family: Georgia, Times, Serif; 
    font-size: 16px; 
    text-transform: capitalize; 
    text-decoration: none; 
    width: 175px; 
    border-left: 4px solid transparent; 
    -webkit-transition: all .35s ease-in-out; 
    -moz-transition: all .35s ease-in-out; 
    -ms-transition: all .35s ease-in-out; 
    transition: all .35s ease-in-out; 
    text-shadow: 0 -1px 0 rgba(151, 99, 33, .43); 
} 

#cssmenu > ul ul li a:hover 
{ 
    border-left: 4px solid #055988; 
    background: #5783af; 
} 

#cssmenu > ul ul li a:active 
{ 
    background: #5783af; 
} 

HTML 코드 :

<div id='cssmenu'> 
<ul> 
    <li class='has-sub'><a href='home.html'><span>Home</span></a> 
    <ul> 
     <li><a href='resources.html'><span>Resources</span></a></li> 
    <li><a href='products.html'><span>Products</span></a></li> 
    <li class='last'><a href='contact.html'><span>Contact Us</span></a></li> 
     </ul> 
    </li> 
    <li class='has-sub'><a href='health-wellness.html'><span>Health & Wellness</span></a> 
     <ul> 
     <li><a href='cooking-from-scratch.html'><span>Cooking From Scratch</span></a></li> 
     <li><a href='sustainable-gardening.html'><span>Sustainable Gardening</span></a></li> 
     <li><a href='csa.html'><span>Community Supported Agriculture</span></a></li> 
     <li><a href='fun-ways-to-exercise.html'><span>Fun Ways to Exercise</span></a></li> 
     <li><a href='pain-relief.html'><span>Natural Relief for Chronic Pain</span></a></li> 
     <li class='last'><a href='toxic-load.html'><span>Reducing Your Toxic 

Load</span></a></li> 
     </ul> 
    </li> 
    <li><a href='relationships.html'><span>Relationships</span></a></li> 
    <li><a href='wealth.html'><span>Wealth</span></a></li> 
    <li class='last'><a href='spirituality.html'><span>Spirituality</span></a></li> 
</ul> 
</div> 

Answer 1

다음과 같이 시도해보십시오.

#cssmenu 
{ 
    zoom: 1; 
z-index:9999 !important; 
}