コンテンツの後ろに隠れるドロップダウンメニュー？

私はこれを初めて知り、オンラインで見つかったテーマのドロップダウンメニューを表示しようとしています。私はほとんどの部分で動作するようになっていますが、ドロップダウンメニューはメインコンテンツの背後に隠れています。私は ".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>

私は信じています問題は一般的なクラスのどこかにありますが、私はページ全体をねじ込むことなく修正する方法を理解できません。

出典

2016-07-08 Matt

正確な答えをnav HTMLで与えるのは難しいですが、おそらくあなたのnav要素のz-indexを調整する必要があります。別の要素の前に何かをz-インデクシングする必要があるときはいつでも、Z-インデックスは子要素ではなく兄弟要素の間に適用する必要があります.Z-インデックスをドロップダウン自体に追加するとトップレベルのリンクそれらは兄弟要素であるからです。それが理にかなっているかどうか私に教えてください！ – will

うーん、それは動作していないようだが、私はあなたが言っているものを得る！これまでに働いたのは、.wrapタグから "overflow：hidden"要素を削除することだけですが、これはページの右上にボトム（またはフッター）全体を移動させます。それについての考えは？ページ全体を投稿するだけでいいのか、それとも簡単にできないのか分かりません。 – Matt

私は周りのコードを実行するリンクがありますか？ – will

私は、メニューのDOMが本体の前に来るので、絶対的な位置がメインコンテンツを積み重ねる原因になっていると思います。

すぐ隣に2つのdivがあり、最初のものは絶対的な位置決めが行われているとします。 2番目のdivは最初のdivよりも上に表示されますが、これはDOMのレンダリング方法です。

@は彼のコメントに記載されているように、Zインデックスを追加するのがおそらくここで取る最良のルートです。

出典

2016-07-08 15:33:56

この原因あなたはそれを削除した場合overflow:hidden;はそうsubmenuが表示され、それとも、.header後、いくつかのコンテンツを追加した場合、メニューはこの場合も

出典

2016-07-08 15:40:15

変更のzへのzインデックスに表示されます.wrapクラスに与えるので、メニューの場合は-index 1、残りのページの場合はz-index 0となります。私はそれがうまくいくと思います...

出典

2016-07-09 04:29:01

コンテンツの後ろに隠れるドロップダウンメニュー？

答えて

関連する問題