stackoom
  简体   繁体   中英

Page navigation blocking website navigation bar

 原文  2016-12-14 19:57:42  3   2    html/ css

Question

I'm having trouble fixing my page navigation (in the home section) to not block the main website navigation bar. I've looked it up, but can't seem to find an answer that works. I'd like the main navigation to fall in front of the secondary page navigation. I created a jsfiddle to show what's happening.

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>

2 answers

solution1
 2 ACCPTED  2016-12-14 20:01:57

Add z-index to .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 specifies the order of positioned elements. When elements overlap, it determines which one covers the other.

Updated JSFiddle

solution2
 0  2016-12-14 20:13:06

Add z-index value for the absolute position submenu elements. Read this Z_IDEX PRROPERTY . Here is your Fiddle . Simply add this CSS on your part(Check line number 54 on fiddle link) 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Content hide in Navigation Bar - One Page Website Why is the navigation bar for my website stuck on the middle of the page? Single navigation bar across website? Why is the navigation bar not on top of the website? website content overlapping the navigation bar JavaScript and CSS Website Navigation Bar Navigation bar links are not clickable on website different website links in the navigation bar Foundation Navigation Bar blocking form fields Full page website with left navigation
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM