嵌套导航列表关闭，但不完全是我想要的

Question

我目前正在为我的网站使用嵌套导航列表。

<header>
    <nav>
        <h1><a href="index.php"><img src="mommyinfologo.png"/></h1>
        <ul class="navMenu">
            <a href="index.php">
                <li class="parentMenu">Home
                    <ul class="sub-menu">
                        <a href="mommymadness.php">
                            <li>This Mommy's Madness</li>
                        </a>
                        <a href="about.php">
                            <li>About Mommy Info</li>
                        </a>
                        <a href="contact.php">
                            <li>Contact Mommy Info</li>
                        </a>
                    </ul>

                </li>
            </a>

            <a href="pregnancysplash.php">
                <li class="parentMenu">Pregnancy
                    <ul class="sub-menu">
                        <a href="ttc.php">
                            <li>Trying To Conceive</li>
                        </a>
                        <a href="fetaldev.php">
                            <li>Fetal Development</li>
                        </a>
                        <a href="genderpredictions.php">
                            <li>Gender Predictions</li>
                        </a>
                        <a href="labordelivery.php">
                            <li>Labor and Delivery</li>
                        </a>
                    </ul>
                </li>
            </a>
            <a href="aabsplash.php">
                <li class="parentMenu">All About Baby
                    <ul class="sub-menu">
                        <a href="advice.php">
                            <li>Advice</li>
                        </a>
                        <a href="guidelines.php">
                            <li>Guidelines</li>
                        </a>
                        <a href="milestones.php">
                            <li>Milestones</li>
                        </a>
                        <a href="learndev.php">
                            <li>Learning Development</li>
                        </a>
                    </ul>
                </li>
            </a>
            <a href="healthsplash.php">
                <li class="parentMenu">Health
                    <ul class="sub-menu">
                        <a href="pregnutrition.php">
                            <li>Pregnancy Nutrition</li>
                        </a>
                        <a href="breastfeeding.php">

                            <li>Breastfeeding</li>
                        </a>
                        <a href="formula.php">
                            <li>Formula Feeding</li>
                        </a>
                        <a href="toddlers.php">
                            <li>Toddlers</li>
                        </a>
                        <a href="preexercise.php">
                            <li>Prenatal Exercise</li>
                        </a>
                        <a href="postexercise.php">
                            <li>Postpartum Exercise</li>
                        </a>
                        <a href="organic.php">
                            <li>Organic DIY Health</li>
                        </a>
                    </ul>
                </li></a>
                <a href="partymommasplash.php">
                    <li class="parentMenu">Party Momma
                        <ul class="sub-menu">
                            <a href="pregann.php">
                                <li>Pregnancy Announcement</li>
                            </a>
                                <a href="genderreveal.php">
                                    <li>Gender Reveal</li>
                                </a>
                            <a href="babyshower.php"><li>Baby Shower</li></a>
                            <a href="birthann.php">  <li>Birth Announcement</li></a>
                            <a href="birthdays.php">    <li>Birthdays</li></a>
                        </ul>
                    </li></a>
            <a href="stationssplash.php"><li class="parentMenu">Stations
                            <ul class="sub-menu">
                                <a href="hospitalbag.php"><li>Hospital Bag</li></a>
                                <a href="diaperbag.php"><li>Diaper Bag</li></a>
                                <a href="changingstation.php">   <li>Changing Station</li></a>
                                <a href="babygear.php"><li>Baby Gear</li></a>
                            </ul>
                    </li></a>
            <a href="memorymarkerssplash.php"><li class="parentMenu">Memory Markers
                            <ul class="sub-menu">
                                <a href="diymemories.php"><li>Do It Yourself</li></a>
                                <a href="purchasable.php"><li>Buy It</li></a>
                            </ul>
                </li></a>
            <a href="reviewsplash.php"><li class="parentMenu">Reviews
                            <ul class="sub-menu">
                                <a href="games.php"> <li>Games</li></a>
                                    <a href="gear.php"><li>Gear</li></a>
                                        <a href="learning.php"><li>Learning</li></a>
                            </ul>
                </li></a>
            <a href="mommymadness.php"><li class="parentMenu">Blog
                    </li></a>

        </ul>
        <?php include_once ("header2.php"); ?>
    </nav>

</header>

我正在为响应式网站导航创建header2.php。

<div id="handle">☰Menu
<ul id="navSmall">
    <li class="parentMenuSmall">Home
        <ul class="sub-menu-small">
            <a href="index.php"><li>Home</li></a>
            <a href="about.php"><li>About</li></a>
            <a href="contact.php"><li>Contact</li></a>
            <a href="mommymadness.php"><li>Mommy Madness</li></a>
        </ul>
    </li>
    <li class="parentMenuSmall">Pregnancy
        <ul class="sub-menu-small">
            <a href="pregnancysplash.php"><li>Pregnancy</li></a>
            <a href="ttc.php"><li>Trying to Conceive</li></a>
            <a href="about.php"><li>Fetal Development</li></a>
            <a href="contact.php"><li>Gender Predictions</li></a>
            <a href="mommymadness.php"><li>Labor and Delivery</li></a>
        </ul>
    </li>
    <li class="parentMenuSmall">All About Baby
        <ul class="sub-menu-small">
            <a href="index.php"><li>Home</li></a>
            <a href="about.php"><li>About</li></a>
            <a href="contact.php"><li>Contact</li></a>
            <a href="mommymadness.php"><li>Mommy Madness</li></a>
        </ul>
    </li>
    <li class="parentMenuSmall">Health
        <ul class="sub-menu-small">
            <a href="index.php"><li>Home</li></a>
            <a href="about.php"><li>About</li></a>
            <a href="contact.php"><li>Contact</li></a>
            <a href="mommymadness.php"><li>Mommy Madness</li></a>
        </ul>
    </li>
    <li class="parentMenuSmall">Party Momma
        <ul class="sub-menu-small">
            <a href="index.php"><li>Home</li></a>
            <a href="about.php"><li>About</li></a>
            <a href="contact.php"><li>Contact</li></a>
            <a href="mommymadness.php"><li>Mommy Madness</li></a>
        </ul>
    </li>
    <li class="parentMenuSmall">Stations
        <ul class="sub-menu-small">
            <a href="index.php"><li>Home</li></a>
            <a href="about.php"><li>About</li></a>
            <a href="contact.php"><li>Contact</li></a>
            <a href="mommymadness.php"><li>Mommy Madness</li></a>
        </ul>
    </li>
    <li class="parentMenuSmall">Memory Markers
        <ul class="sub-menu-small">
            <a href="index.php"><li>Home</li></a>
            <a href="about.php"><li>About</li></a>
            <a href="contact.php"><li>Contact</li></a>
            <a href="mommymadness.php"><li>Mommy Madness</li></a>
        </ul>
    </li>
    <li class="parentMenuSmall">Reviews
        <ul class="sub-menu-small">
            <a href="index.php"><li>Home</li></a>
            <a href="about.php"><li>About</li></a>
            <a href="contact.php"><li>Contact</li></a>
            <a href="mommymadness.php"><li>Mommy Madness</li></a>
        </ul>
    </li>
    <li class="parentMenuSmall">Blog
        <ul class="sub-menu-small">
            <a href="index.php"><li>Home</li></a>
            <a href="about.php"><li>About</li></a>
            <a href="contact.php"><li>Contact</li></a>
            <a href="mommymadness.php"><li>Mommy Madness</li></a>
        </ul>
    </li>
</ul>

</div>

我当前的CSS：

body {
    color:#ADD8E6;
    background-image:url(backgroundarrows.png);
    font-family:"Monotype Corsiva", sans-serif;
    margin:0;
    padding:0;
}
/* Global */
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color:#737597;
;
}

.section {
    background-color:#fafbff;
    border:thin solid #D3D3D3;
    border-radius:10px;
    box-shadow:lightgray;
    color:#696969;
    display:inline;
    float:left;
    width:63%;
    margin:0 1% 1%;
    padding:5px 8px;
}

.section h2 {
    border-bottom:solid medium #90cdd0;
    color:#90cdd0;
    text-align:center;
}

#about {
    color:dimgrey;
    float:right;
    font-size:medium;
    margin:1% 1% 0;
    text-align:center;
    width:30%;
}

.nav li {
    text-align:left;
    font-size:large;
    padding:1%;
}

.nav a {
    text-decoration:none;
    color:darkgrey;
}

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

#home div {
    font-size:20px;
    line-height:30px;
    padding:1% 3%;
    text-align:center;
}

#home div p{
    font-family:"Times New Roman", serif;
    font-size:20px;
    line-height: 30px;
    text-align:left;
}

.hide {
    display: none;
}

/* Header */
header {
    background-color:#cff1ff;
    height:60px;
    padding:5px 0;
}

header h1 {
    color:#809dc6;
    display:inline;
    font-family:"Monotype Corsiva", sans-serif;
    font-size:45px;
    height:50px;
    padding:5px 15px;
}

/*Website Navigation */
.navMenu {
    display:inline;
    font-size:20px;
}

.navMenu .parentMenu {
    background-color:#cff1ff;
    display:inline-block;
    padding:5px 10px;
    position:relative;
    z-index:100000;
}

.navMenu .parentMenu:hover{
    background-color:#bfd3ee;
}

.navMenu .parentMenu a{
    color:#737597;
}

.navMenu .parentMenu:hover a:hover{
    color:#87a2be;
}

.navMenu .parentMenu .sub-menu{
    display:none;
    left:0;
    padding:0;
    position:absolute;
    top:33px;
    width:180px;
    z-index:10000;
}

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

.navMenu .parentMenu:hover .sub-menu li{
    background-color:#bfd3ee;
    font-size:17px;
    padding:10px;
    text-align:left;
    white-space:nowrap;
    width:100%;
    z-index:10000;
}

.navMenu .parentMenu .sub-menu li:hover{
    background-color:#9ac9ed;
}

#handle{
    font-size: 20px;
    display: none;
    color: #87a2be;
    float: left;
    width: 100%;
    text-align: left;
}

#navSmall {
    display: none;
    text-align: center;
    background-color: #cff1ff;
    z-index: 10000000;
    height: 25px;
}

#handle:hover #navSmall {
    display: inline;
}

.sub-menu-small{
    display: none;
    background-color: #9ac9ed;
}

.sub-menu-small li {
    border-bottom: solid thin #809dc6;
    padding:1px 3px;
}

#navSmall .parentMenuSmall {
    background-color: inherit;
    text-align: left;
    padding: 15px;
    border-bottom: solid thin #809dc6;
    font-size: 18px;
}
#navSmall .parentMenuSmall:hover .sub-menu-small {
    display: inline-block;
    margin-left: 25px;
}
#construct {
    width: 100%;
    height: 100%;
    margin-top: 100px;
    border-radius: 20%;
}
/* Media Queries */
/*tablet*/
/*remove floats */
@media(max-width: 768px) {
    body{
        width: 100%;
    }
    header {
        float: none;
        text-align: center;
        width: 100%;
        height: 90px;
    }

    .section{
        width: 95%;
    }

    #about{
        display: none;
    }

    #handle{
        display: block;
    }

    .navMenu {
        display: none;
    }

}

我希望我的.sub菜单-small显示在我的.parentMenuSmall项目之外的左侧。现在它在.parentMenuSmall列表项中，它会将所有其他.parentMenuSmall项下推。我需要把它从列表项中拉出来吗?如果是的话，我该如何让它像现在这样工作呢？

Answer 1

我真的很担心，你为什么不使用像getbootstrap这样的响应式框架

创建与站点行为相同的响应式导航只需要一分钟的工作，您可能需要在站点中包含引导css和js，并按您喜欢的方式添加导航http://getbootstrap.com/components/#nav，仅此而已