頁面導航阻止網站導航欄

我無法修復我的頁面導航（在主頁部分）不阻止主要網站導航欄。我查了它，但似乎無法找到有效的答案。我希望主導航位於輔助頁面導航前。我創建了一個jsfiddle來展示正在發生的事情。頁面導航阻止網站導航欄

CSS：

body { 
background-color: beige; 
color: lightblue; 
padding: 0; 
margin:0; 
} 

header { 
background-color: lightblue; 
padding: 5px 0; 
margin: 0; 
} 
header h1 { 
color: cadetblue; 
font-family: Arial; 
margin: 0; 
padding: 5px 15px; 
display: inline; 
} 

.navMenu{ 
display: inline; 
margin: 0; 
} 

.navMenu .parentMenu { 
display: inline-block; 
list-style-type: none; 
background-color: lightgray; 
padding: 5px 10px; 
border: thin solid darkgray; 
border-radius: 3px; 
color: honeydew; 
position: relative; 
margin: 0; 
} 

.navMenu .parentMenu a{ 
color: azure; 
} 

.navMenu .parentMenu .sub-menu{ 
display: none; 
position: absolute; 
list-style-type: none; 
padding: 0; 
margin: 0; 
left: -1px; 
top: 27px; 
} 


.navMenu .parentMenu:hover .sub-menu{ 
    display: block; 
    } 

.parentMenu:hover .sub-menu li{ 
border: thin solid darkgray; 
padding: 4%; 
background-color: lightgray; 
color: honeydew; 
text-align: left; 
white-space: nowrap; 
width: 100%; 
list-style-type: none; 
margin: 0; 
} 

.parentMenu .sub-menu li:hover { 
background-color: lightsteelblue; 
} 




.section { 
background-color: wheat; 
color: darkslategray; 
padding: 5px; 
float: left; 
display: inline; 
width: 63%; 
margin: 0 1% 1% 1%; 
border-radius: 10px; 
border: thin solid khaki; 
box-shadow: lightgray; 
} 

#about { 
float: right; 
width: 30%; 
margin: 1% 1% 0 0; 
text-align: center; 
} 

#home { 
margin: 1% 0 1% 1%; 
} 

h4, h3 { 
color: lightseagreen; 
} 

#fdnav { 
margin: 1% 0 1% 1%; 
padding: 1% .5%; 
} 

.fdNavMenu{ 
display: inline; 
margin: 0; 
padding: 0; 
} 


.fdNavMenu .parentMenu { 
display: inline-block; 
list-style-type: none; 
position: relative; 
background-color: lightgray; 
border: thin solid darkgray; 
border-radius: 3px; 
margin: -0.1%; 
padding: .2%; 
} 
.fdNavMenu .parentMenu a{ 
color: honeydew; 
} 

.fdNavMenu .parentMenu .sub-menu { 
display: none; 
position: absolute; 
left: -1px; 
top: 22px; 
margin: 0; 
padding: 0; 
} 

.fdNavMenu .parentMenu:hover .sub-menu { 
display: inline; 
}

HTML代碼：

<body> 
<header> 
    <nav> 
     <h1> Welcome to Mommy Madness</h1> 
     <ul class="navMenu"> 
      <li class="parentMenu"><a href="../Home/mmHome.html">Home</a> 
       <ul class="sub-menu"> 
        <li><a href="../Home/mmAbout.html">About</a></li> 
        <li><a href="../Home/mmContact.html">Contact</a></li> 
       </ul> 
      </li> 
      <li class="parentMenu"><a href="../PregnancyPages/preg.html">Pregnancy</a> 
       <ul class="sub-menu"> 
        <li><a href="../PregnancyPages/pregAdvice.html">Advice</a></li> 
        <li><a href="../PregnancyPages/pregGenderPredictions.html">Gender Predictions</a></li> 
        <li><a href="../PregnancyPages/pregTTC.html">Trying To Conceive</a></li> 
       </ul> 
      </li> 
      <li class="parentMenu"><a href="../AllAboutBaby/AllAboutBaby.html">All About Baby</a> 
       <ul class="sub-menu"> 
        <li><a href="../AllAboutBaby/aabFetalDev.html">Fetal Development</a></li> 
        <li><a href="../AllAboutBaby/aabGuidelines.html">Guidelines </a> </li> 
        <li><a href="../AllAboutBaby/aabMilestones.html"> Milestones</a></li> 
       </ul> 
      </li> 
      <li class="parentMenu"><a href="../PartyMomma/PartyMomma.html">Party Momma</a> 
       <ul class="sub-menu"> 
        <li><a href="../PartyMomma/pmPregAnn.html">Pregnancy Announcement</a></li> 
        <li><a href="../PartyMomma/pmGenderReveal.html">Gender Reveal</a></li> 
        <li><a href="../PartyMomma/pmBabyShower.html">Baby Shower</a></li> 
        <li><a href="../PartyMomma/pmBirthAnn.html">Birth Announcement</a></li> 
        <li><a href="../PartyMomma/pmBirthdays.html"> Birthdays</a></li> 
       </ul> 
      </li> 
      <li class="parentMenu"><a href="../Stations/Stations.html">Stations</a> 
       <ul class="sub-menu"> 
        <li><a href="../Stations/sHospitalBag.html">Hospital Bag</a></li> 
        <li><a href="../Stations/sDiaperBag.html">Diaper Bag</a></li> 
        <li><a href="../Stations/sChangingStation.html">Changing Station</a></li> 
        <li><a href="../Stations/sBabyGear.html">Baby Gear</a></li> 
       </ul> 
      </li> 
      <li class="parentMenu"><a href="../MemoryMarkers/memoryMarkers.html">Memory Markers</a> 
       <ul class="sub-menu"> 
        <li><a href="../MemoryMarkers/memDIY.html">DIY</a></li> 
        <li><a href="../MemoryMarkers/memPurchase.html">Purchases</a></li> 
       </ul> 
      </li> 
      <li class="parentMenu"><a href="../Reviews/Reviews.html">Reviews</a> 
       <ul class="sub-menu"> 
        <li><a href="../Reviews/Games.html">Games</a></li> 
        <li><a href="../Reviews/Gear.html">Gear</a></li> 
        <li><a href="../Reviews/Learning.html">Learning</a></li> 
       </ul> 
      </li> 
      <li class="parentMenu"><a href="../Blog/mmBlog.html">Blog</a> 
       <ul class="sub-menu"> 
        <li>Fit Momma</li> 
        <li>Minimal Momma</li> 
        <li>Modern Momma</li> 
        <li>Organic Momma</li> 
        <li>Organizing Queen</li> 
        <li>Savings Savvy</li> 
        <li>Tech Savvy</li> 
        <li>Traditional Momma</li> 
       </ul> 
      </li> 
     </ul> 
    </nav> 
</header> 


<div class="section" id="about"> 
    <h4>Fetal Development</h4> 
    <p>Everyone wonders what in the world is going on inside the womb. <br> I've created a database 
     of sorts to contain all knowledge of fetal development. <br> It's great to have all answers in one place, huh? </p> 
</div> 

<div class="section" id="fdnav"> 
    <ul class="fdNavMenu"> 
     <li class="parentMenu"><a href="Fetal%20Dev/Month1/monthone.html"> Month One</a> 
      <ul class="sub-menu"> 
       <li><a>Week One</a></li> 
       <li><a>Week Two</a></li> 
       <li><a>Week Three</a></li> 
       <li><a>Week Four</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="Fetal%20Dev/Month2/monthtwo.html"> Month Two</a> 
      <ul class="sub-menu"> 
       <li><a>Week Five</a></li> 
       <li><a>Week Six</a></li> 
       <li><a>Week Seven</a></li> 
       <li><a>Week Eight</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="Fetal%20Dev/Month3/monththree.html"> Month Three</a> 
      <ul class="sub-menu"> 
       <li><a>Week Nine</a></li> 
       <li><a>Week Ten</a></li> 
       <li><a>Week Eleven</a></li> 
       <li><a>Week Twelve</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="Fetal%20Dev/Month4/monthfour.html"> Month Four</a> 
      <ul class="sub-menu"> 
       <li><a>Week 13</a></li> 
       <li><a>Week 14</a></li> 
       <li><a>Week 15</a></li> 
       <li><a>Week 16</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="Fetal%20Dev/Month5/monthfive.html"> Month Five</a> 
      <ul class="sub-menu"> 
       <li><a>Week 17</a></li> 
       <li><a>Week 18</a></li> 
       <li><a>Week 19</a></li> 
       <li><a>Week 20</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="Fetal%20Dev/Month6/monthsix.html"> Month Six</a> 
      <ul class="sub-menu"> 
       <li><a>Week 21</a></li> 
       <li><a>Week 22</a></li> 
       <li><a>Week 23</a></li> 
       <li><a>Week 24</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="Fetal%20Dev/Month7/monthseven.html"> Month Seven</a> 
      <ul class="sub-menu"> 
       <li><a>Week 25</a></li> 
       <li><a>Week 26</a></li> 
       <li><a>Week 27</a></li> 
       <li><a>Week 28</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="Fetal%20Dev/Month8/montheight.html"> Month Eight</a> 
      <ul class="sub-menu"> 
       <li><a>Week 29</a></li> 
       <li><a>Week 30</a></li> 
       <li><a>Week 31</a></li> 
       <li><a>Week 32</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="Fetal%20Dev/Month9/monthnine.html"> Month Nine</a> 
      <ul class="sub-menu"> 
       <li><a>Week 33</a></li> 
       <li><a>Week 34</a></li> 
       <li><a>Week 35</a></li> 
       <li><a>Week 36</a></li> 
      </ul> 
     </li> 
     <li class="parentMenu"><a href="Fetal%20Dev/MonthTen/monthten.html"> Month Ten</a> 
      <ul class="sub-menu"> 
       <li><a>Week 37</a></li> 
       <li><a>Week 38</a></li> 
       <li><a>Week 39</a></li> 
       <li><a>Week 40</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

來源

2016-12-14 ethacker

添加z-index到.parentMenu：

.navMenu .parentMenu { 
    display: inline-block; 
    list-style-type: none; 
    background-color: lightgray; 
    padding: 5px 10px; 
    border: thin solid darkgray; 
    border-radius: 3px; 
    color: honeydew; 
    position: relative; 
    margin: 0; 
    z-index: 1; 
}

z-index指定了定位元素的順序。當元素重疊時，它決定哪一個覆蓋另一個。

更新JSFiddle

來源

2016-12-14 20:01:57

添加z索引值的絕對位置的子菜單的元素。閱讀Z_IDEX PRROPERTY。這是你的Fiddle。簡單地在你的部分添加這個CSS（在小提琴鏈接上檢查行號碼54）

.sub-menu { 
    z-index:1000; 
}

來源

2016-12-14 20:13:06

頁面導航阻止網站導航欄

回答

相關問題