页面导航阻止网站导航栏

时间：2016-12-14 19:57:42

标签： html css

我无法修复我的页面导航（在主页部分）以阻止主网站导航栏。我已经查了一下，但似乎无法找到有效的答案。我希望主导航落在辅助页面导航的前面。我创建了一个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>

2 个答案:

答案 0 :(得分：2)

将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

答案 1 :(得分：0)

为绝对位置子菜单元素添加z-index值。阅读此Z_IDEX PRROPERTY。这是你的Fiddle。只需在您的部分添加此CSS（查看小提琴链接上的第54行）

.sub-menu {
  z-index:1000;
}
相关问题
最新问题