2017-02-22 56 views
0

我的下拉菜單無法正常工作,但它是直到昨天,我無法弄清楚什麼是錯的,我有雙重檢查代碼,以便我的下拉菜單心不是工作

#apDiv2 { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: auto; 
 
    float: none; 
 
    z-index: 6; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
    z-index: 6 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
    width: 25%; 
 
    text-align: center; 
 
} 
 

 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}
<div id="apDiv2"> 
 
    <ul> 
 
    <li><a href="homeA2.html">HOME</a></li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn">WORLD WAR 1</a> 
 
     <div class="dropdown-content"> 
 
     <a href="HOWITBEGANA2.html">HOW IT BEGAN AND ENDED</a> 
 
     <a href="SOILDERSLIFEA2.html">A SOLIDERS LIFE</a> 
 
     <a href="WOMENSJOBA2.html">A WOMENS JOB</a> 
 
     </div> 
 
     <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn">NOTABLE FIGURES</a> 
 
     <div class="dropdown-content"> 
 
      <a href="NotableFigures1A2.html">NOTABLE FIGURES PART 1</a> 
 
      <a href="NotableFigures2A2.html">NOTABLE FIGURES PART 2</a></div> 
 
     <li><a href="CommentsA2.html">COMMENTS AND QUETIONS</a></li> 
 
    </ul> 
 
</div>

回答

1

這是因爲您在#apDiv2ul元素上都使用了CSS規則overflow: hidden。從他們刪除規則,你應該看到你的下拉菜單。

+0

感謝的jsfiddle,它公頃他的工作 –

0

#apDiv2刪除overflow: hidden;,它迫使瀏覽器阻止下拉內容。

您應該使用

#apDiv2 { 
    position: fixed; 
    width: 100%; 
    height: auto; 
    float: none; 
    z-index: 6; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #333333; 
    z-index: 6 
} 
0

overflow: hidden導致所顯示的原始元素的矩形以外的所有事情,才能裁剪和隱藏。當你刪除這條線時,一切正常。

1

#apDiv2刪除overflow: hidden;

#apDiv2 { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: auto; 
 
    float: none; 
 
    z-index: 6; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #333333; 
 
    z-index: 6 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
    width: 25%; 
 
    text-align: center; 
 
} 
 

 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}
<div id="apDiv2"> 
 
    <ul> 
 
    <li><a href="homeA2.html">HOME</a></li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn">WORLD WAR 1</a> 
 
     <div class="dropdown-content"> 
 
     <a href="HOWITBEGANA2.html">HOW IT BEGAN AND ENDED</a> 
 
     <a href="SOILDERSLIFEA2.html">A SOLIDERS LIFE</a> 
 
     <a href="WOMENSJOBA2.html">A WOMENS JOB</a> 
 
     </div> 
 
     <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn">NOTABLE FIGURES</a> 
 
     <div class="dropdown-content"> 
 
      <a href="NotableFigures1A2.html">NOTABLE FIGURES PART 1</a> 
 
      <a href="NotableFigures2A2.html">NOTABLE FIGURES PART 2</a></div> 
 
     <li><a href="CommentsA2.html">COMMENTS AND QUETIONS</a></li> 
 
    </ul> 
 
</div>

0

刪除溢出:#隱藏apDiv2

#apDiv2 { 
    position: fixed; 
    width: 100%; 
    height: auto; 
    float: none; 
    z-index: 6; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #333333; 
    z-index: 6 
} 

這裏是工作https://jsfiddle.net/1bnpxdzb/1/