내용 뒤에 숨어있는 드롭 다운 메뉴가 있습니까?

Question

저는이 주제를 처음 접했고 온라인에서 찾은 주제에 드롭 다운 메뉴를 넣으려고했습니다. 나는 대부분 그 부분에서 작동하도록 만들었지 만, 드롭 다운 메뉴는 주요 내용 뒤에 숨어 있습니다. 내가 ".menu ul #listcontain"에 대한 상단 패딩을 조정할 때 작동하기 때문에 이것이 문제라는 것을 알지만 사진을 원하지 않는 장소로 이동시킵니다. 나는 모든 것을 시도한 것처럼 느껴지고 (Z- 인덱스, 위치 등을 조정 함) 여전히 그것을 파악할 수 없습니다. 방금 한 달 전에이 일을 시작한 사람이 나를 도울 수 있습니까? 많은 감사합니다.

그래서 나는이 (그것은 큰 페이지의 바로 메뉴 그래서 나는 내가 원하는 부분 만 포함하도록 노력하고있어.)가 한 CSS를 위해 :

*{padding:0; margin:0;} 
 
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px;  color:#1491c1; background:url(../images/bg.jpg) repeat;} 
 
img{border:none;} 
 
h1{ font-family: 'Droid Serif', serif; font-weight:normal; color:#fff;} 
 
h2{ font-family: 'Droid Serif', serif; font-weight:normal; color:#fff; font- size:18px;} 
 
P{ line-height:20px;} 
 
a{text-decoration:none; color:#1491c1;} 
 
a:hover{color:#fff;} 
 

 
/*------------------------------------------------- 
 
GENERAL CLASSES 
 
-------------------------------------------------*/ 
 
.mar-top{ margin-top:40px;} 
 
.mar-top30{ margin-top:30px;} 
 
.mar-bottom{ margin-bottom:40px;} 
 
.mar-Right{ margin-right:40px;} 
 
.mar-right115{ margin-right:115px;} 
 
.float-left{ float:left;} 
 
.float-right{ float:right;} 
 
.clearing { clear:both;} 
 
.bor-bottm-non{border-bottom:none!important;} 
 
.panel{} 
 
.title{} 
 
.content{} 
 
.wrap{width:960px; margin:0 auto;overflow:hidden; background:url(../images/page-bg.jpg);} 
 
.page{ width:580px; margin:0 auto;overflow:hidden; padding-bottom:50px;} 
 
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding- bottom:30px; padding-top:30px;} 
 
.block{padding:20px 20px 20px 20px; margin:0 auto;} 
 
.block2{padding:20px 20px 20px 20px; margin:0 auto;} 
 
.button a{text-decoration:none; display:block; width:70px; height:30px; background:#1491c1; color:#ffffff; font-family:Arial, Helvetica, sans-serif; line-height:30px; text-align:center;} 
 
.button a:hover{ background:#0e5295;} 
 

 
/*------------------------------------------------- 
 
CONTENT CLASSES 
 
-------------------------------------------------*/ 
 
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding- bottom:30px; padding-top:30px;} 
 
.page-content .content h3{ padding-bottom:20px;font-family: 'Droid Serif', serif; font-weight:normal; color:#fff; font-size:16px;} 
 
.page-content .content p{ padding-bottom:15px;} 
 

 
/*------------------------------------------------- 
 
HEADER CLASSES 
 
-------------------------------------------------*/ 
 
.header-wrap{ background:#083266; height:162px; width: 960; } 
 
.header{ width:1200px; margin:0 auto; z-index: 11;} 
 
.logo{ float:left; background:#1491c1; width:300px; } 
 
.logo h1{font-size:25px; text-align:left; padding:40px 0px 36px 25px ; 
 
} 
 

 
.menu ul #listcontain{ list-style:none; float: left; border-right:#093e76 solid 1px; padding: 0px 20px 30px 20px; } 
 
.menu ul #listcontain a{ text-decoration:none; color:#80d2f8; font- size:14px; text-align:center;padding-right: 5px;} 
 
.menu ul #listcontain a:hover{ color:#1491c1;} 
 
.menu ul #listcontain a.active{ color:#1491c1;} 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
#main { 
 
    position: relative; 
 
    list-style: none; 
 
    background: #083266; 
 
    font-weight: 400; 
 
    font-size: 0; 
 
    text-transform: none; 
 
    display: inline-block; 
 
    padding: 118px 0px 0px 0px; 
 
    margin: 0 auto; 
 
} 
 
#main li { 
 
    color: #ffffff; 
 
    font-size: 0.8rem; 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 13px 20px; 
 
    cursor: pointer; 
 
    z-index: 5; 
 
    min-width: 120px; 
 
} 
 

 
li { 
 
    margin: 0; 
 
} 
 

 
#marker { 
 
    height: 6px; 
 
    background: #1491c1 !important; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 120px; 
 
    z-index: 2; 
 
    -webkit-transition: all 0.35s; 
 
    -moz-transition: all 0.35s; 
 
    -ms-transition: all 0.35s; 
 
    transition: all 0.35s; 
 
} 
 

 
#main li:nth-child(1):hover ul div { 
 
    -webkit-transform: translate(0, 0); 
 
    -moz-transform: translate(0, 0); 
 
    -ms-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
} 
 
#main li:nth-child(1):hover ~ #marker { 
 
    -webkit-transform: translate(0px, 0); 
 
    -moz-transform: translate(0px, 0); 
 
    -ms-transform: translate(0px, 0); 
 
    transform: translate(0px, 0); 
 
} 
 
#main li:nth-child(2):hover ul div { 
 
    -webkit-transform: translate(0, 0); 
 
    -moz-transform: translate(0, 0); 
 
    -ms-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
} 
 
#main li:nth-child(2):hover ~ #marker { 
 
    -webkit-transform: translate(130px, 0); 
 
    -moz-transform: translate(130px, 0); 
 
    -ms-transform: translate(130px, 0); 
 
    transform: translate(133px, 0); 
 
} 
 
#main li:nth-child(3):hover ul div { 
 
    -webkit-transform: translate(0, 0); 
 
    -moz-transform: translate(0, 0); 
 
    -ms-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
} 
 
#main li:nth-child(3):hover ~ #marker { 
 
    -webkit-transform: translate(260px, 0); 
 
    -moz-transform: translate(260px, 0); 
 
    -ms-transform: translate(260px, 0); 
 
    transform: translate(269px, 0); 
 
} 
 

 
#main li:nth-child(4):hover ul div { 
 
    -webkit-transform: translate(0, 0); 
 
    -moz-transform: translate(0, 0); 
 
    -ms-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
} 
 
#main li:nth-child(4):hover ~ #marker { 
 
    -webkit-transform: translate(360px, 0); 
 
    -moz-transform: translate(380px, 0); 
 
    -ms-transform: translate(360px, 0); 
 
    transform: translate(397px, 0); 
 
} 
 
#main li:nth-child(5):hover ul div { 
 
    -webkit-transform: translate(0, 0); 
 
    -moz-transform: translate(0, 0); 
 
    -ms-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
} 
 
#main li:nth-child(5):hover ~ #marker { 
 
    -webkit-transform: translate(360px, 0); 
 
    -moz-transform: translate(380px, 0); 
 
    -ms-transform: translate(360px, 0); 
 
    transform: translate(529px, 0); 
 
} 
 

 
#drops { 
 
    overflow: hidden; 
 
    list-style: none; 
 
    position: absolute; 
 
    padding: 0; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 58px; 
 

 
} 
 
#drops div { 
 
    -webkit-transform: translate(0, -100%); 
 
    -moz-transform: translate(0, -100%); 
 
    -ms-transform: translate(0, -100%); 
 
    transform: translate(0, -100%); 
 
    -webkit-transition: all 0.5s 0.1s; 
 
    -moz-transition: all 0.5s 0.1s; 
 
    -ms-transition: all 0.5s 0.1s; 
 
    transition: all 0.5s 0.1s; 
 
    position: relative; 
 
} 
 
#drops li { 
 
    display: block;; 
 
    padding: 0; 
 
    width: 100%; 
 
    background: #3E8760 !important; 
 
    z-index: 10; 
 
}

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel="stylesheet" type="text/css"> 
 

 
<nav> 
 
    <div class="wrap"> 
 
    <div class="header"> 
 
     <div class="logo"><h1>JHT Market Development Team (MDT) Site</h1></div> 
 
     <div class="menu" id="main"> 
 
     <ul> 
 
      <li id="listcontain"><a href="index.html" class="active">Home</a></li> 
 
      <li id="listcontain"><a href="about.html">MDT Resources </a> 
 
      <ul class="drop" id="drops"> 
 
       <div> 
 
       <li>MDT Calender</li> 
 
       <li>MDT Agendas</li> 
 
       <li>Meeting Materials</li> 
 
       </div> 
 
      </ul> 
 
      <li id="listcontain"><a href="services.html">Proposals   </a></li> 
 
      <li id="listcontain"><a href="solutions.html"> CSO Priorities </a></li> 
 
      <li id="listcontain"><a href="contact.html">Contact MDT</a></li> 
 
      <div id="marker"></div> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

내가 생각을 문제는 일반 수업 중 하나에 어딘가에 있지만 전체 페이지를 엉망으로 만들지 않고 해결하는 방법을 알아낼 수 없습니다.

Answer 1

메뉴에 대한 DOM이 본체 앞에 있기 때문에 절대 위치 지정으로 인해 주 콘텐츠가 맨 위에 쌓이게됩니다.

두 개의 div가 서로 바로 옆에 있다고 상상해보십시오. 첫 번째 것은 절대 위치 지정을 받았습니다. 두 번째 div는 첫 번째 div 위에 표시됩니다. DOM이 렌더링하는 방식이기 때문입니다.

@ 자신의 의견에 명시된 바와 같이, Z- 인덱스를 추가하는 것이 아마도 여기에서 취하는 가장 좋은 방법 일 것입니다.

Answer 2

이 원인 당신은 당신이 그것을 제거한 경우 overflow:hidden;이 때문에 submenu이 나타납니다, 아니면 .header 후 일부 콘텐츠를 추가하면 메뉴가이 경우

Answer 3

변경 Z까지 Z- 인덱스에 나타납니다 .wrap 클래스에 제공하기 때문에 -index 1은 메뉴를 나타내고 z-index 0은 나머지 페이지를 나타냅니다. 그게 효과가 있다고 생각합니다 ...