Tengo problemas para arreglar la navegación de mi página (en la sección de inicio) para no bloquear la barra de navegación principal del sitio web. Lo he buscado, pero parece que no puedo encontrar una respuesta que funcione. Me gustaría que la navegación principal se ubicara frente a la navegación de la página secundaria. Creé un jsfiddle para mostrar lo que está sucediendo.

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;
}

Código 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>
1
ethacker 14 dic. 2016 a las 22:57

2 respuestas

La mejor respuesta

Agrega z-index a .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 especifica el orden de los elementos posicionados. Cuando los elementos se superponen, determina cuál cubre al otro.

JSFiddle actualizado

2
Jaqen H'ghar 14 dic. 2016 a las 20:09

Agregue el valor del índice z para los elementos del submenú de posición absoluta. Lea este Z_IDEX PRROPERTY. Aquí está su Fiddle. Simplemente agregue este CSS de su parte (verifique la línea número 54 en el enlace de violín)

.sub-menu {
  z-index:1000;
}
0
Baezid Mostafa 14 dic. 2016 a las 20:13