1
メインのウェブサイトのナビゲーションバーをブロックしないように（ホームセクション内の）ページナビゲーションを修正できません。私はそれを見てきましたが、うまくいく答えを見つけることができないようです。メインナビゲーションがセカンダリページナビゲーションの前に落ちるようにしたいと思います。私は何が起こっているかを示すためにjsfiddleを作成しました。ページナビゲーションがウェブサイトのナビゲーションバーをブロックする
https://jsfiddle.net/ethacker/o5ks4pu2/
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のCODE：
<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>