1. Zuhause
  2. Frage und Antwort
  3. Dropdown-Menü hinter Inhalt versteckt?

Dropdown-Menü hinter Inhalt versteckt?

2016-07-08 24 views
0

Also bin ich neu und habe versucht, ein Dropdown-Menü zu einem Thema, das ich online gefunden habe, zu setzen. Ich habe es größtenteils zum Laufen gebracht, aber das Dropdown-Menü versteckt sich hinter dem Hauptinhalt. Ich weiß, das ist das Problem, weil es funktioniert, wenn ich die obere Polsterung für ".menu ul #listcontain" anpassen, aber es bewegt das Foto an einen Ort, den ich nicht will. Ich habe das Gefühl, alles versucht zu haben (Anpassung von Z-Indizes, Positionen usw.) und kann es immer noch nicht herausfinden. Ich habe das gerade erst vor einem Monat angefangen. Kann mir jemand helfen? Danke vielmals.Dropdown-Menü hinter Inhalt versteckt?

Also dann für die CSS Ich habe dies (nur das Menü Es ist eine große Seite so nur den Teil schließen Ich versuche, die ich brauche.):

*{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>

Ich glaube, Das Problem liegt irgendwo in einer der allgemeinen Klassen, aber ich kann mir nicht vorstellen, wie ich es beheben kann, ohne die ganze Seite zu vermasseln.

Quelle

2016-07-08 Matt

+1

Es ist schwer, eine genaue Antwort nur mit dem nav HTML zu geben, aber Sie müssen wahrscheinlich den Z-Index für Ihr Navigationselement anpassen. Wenn Sie etwas vor einem anderen Element z-indexieren müssen, muss der z-index zwischen gleichgeordneten Elementen und nicht untergeordneten Elementen angewendet werden. Wenn Sie den z-index dem Dropdown-Element selbst hinzufügen, wird dies nur mit dem übergeordneten Link verglichen da diese Geschwisterelemente sind. Lass es mich wissen, wenn das Sinn macht! – will

+0

Hmm, das schien nicht zu funktionieren, aber ich verstehe, was du sagst! Das Einzige, was bisher funktioniert hat, ist das Löschen des "overflow: hidden" -Elements aus dem .wrap-Tag, das bewegt jedoch den gesamten unteren Rand (oder die Fußzeile, denke ich) an die obere rechte Seite der Seite. Irgendwelche Gedanken dazu? Ich weiß nicht, ob ich die ganze Seite posten sollte oder nicht, um es einfacher zu machen. – Matt

+0

Haben Sie einen Link, auf dem der Code läuft? – will

Antwort

0

Ich vermute, dass, da das DOM für das Menü vor dem Körper kommt, die absolute Positionierung bewirkt, dass der Hauptinhalt an der Spitze stapelt.

Stellen Sie sich zwei Divs direkt nebeneinander vor, und das erste wird absolut positioniert. Das zweite div würde sich über dem ersten dividieren, weil DOM das so darstellt.

Wie @will in seinem Kommentar sagte, ist das Hinzufügen eines Z-Index wahrscheinlich der beste Weg, um hier zu nehmen.

Quelle

2016-07-08 15:33:56

0

Diese Ursache, weil Sie .wrap Klasse geben overflow:hidden; so, wenn Sie es das submenu erscheint entfernt, oder wenn Sie auch

Quelle

2016-07-08 15:40:15

0

Ändern Sie den z-Index z in diesem Fall erscheint einige Inhalte nach .header das Menü hinzufügen -index 1 für das Menü und z-index 0 für den Rest der Seite. Ich denke, dass das funktioniert ...

Quelle

2016-07-09 04:29:01

Verwandte Themen

 Verwandte Themen