Html 嵌套uls的响应式导航
我试图使我的网站响应，但我有困难让我的导航工作正常。我试过调整高度，但没有对齐 我希望二级菜单（当您将鼠标悬停在家长菜单列表项上时出现的菜单）与“家长”菜单（显示“家”、“怀孕”、“关于宝宝的一切”等）的高度相同。我使用PHP文件扩展名，但刚刚将“header”和“header2”代码粘贴到了单个文件中的位置Html 嵌套uls的响应式导航,html,css,Html,Css,我试图使我的网站响应，但我有困难让我的导航工作正常。我试过调整高度，但没有对齐 我希望二级菜单（当您将鼠标悬停在家长菜单列表项上时出现的菜单）与“家长”菜单（显示“家”、“怀孕”、“关于宝宝的一切”等）的高度相同。我使用PHP文件扩展名，但刚刚将“header”和“header2”代码粘贴到了单个文件中的位置 <body> <header> <nav> <h1><a href="index.php"><i
<body>
<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>Toddler Nutrition</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">
<p>☰Menu</p>
<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="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>
<li class="parentMenuSmall">All About Baby
<ul class="sub-menu-small">
<a href="aabsplash.php">
<li>All About Baby</li>
</a>
<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>
<li class="parentMenuSmall">Health
<ul class="sub-menu-small">
<a href="healthsplash.php">
<li>Health and Nutrition</li>
</a>
<a href="pregnutrition.php">
<li>Pregnancy Nutrition</li>
</a>
<a href="breastfeeding.php">
<li>Breastfeeding</li>
</a>
<a href="mommymadness.php">
<li>Formula Feeding</li>
</a>
<a href="toddlers.php">
<li>Toddler Nutrition</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>
<li class="parentMenuSmall">Party Momma
<ul class="sub-menu-small">
<a href="partymommasplash.php">
<li>Party Momma</li>
</a>
<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>
<li class="parentMenuSmall">Stations
<ul class="sub-menu-small">
<a href="stationssplash.php">
<li>Stations</li>
</a>
<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>
<li class="parentMenuSmall">Memory Markers
<ul class="sub-menu-small">
<a href="index.php">
<li>Memory Markers</li>
</a>
<a href="diymemories.php">
<li>Do It Yourself</li>
</a>
<a href="purchasable.php">
<li>Buy It</li>
</a>
</ul>
</li>
<li class="parentMenuSmall">Reviews
<ul class="sub-menu-small">
<a href="reviewsplash.php">
<li>Reviews</li>
</a>
<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>
<li class="parentMenuSmall">Blog
<ul class="sub-menu-small">
<a href="mommymadness.php">
<li>This Mommy's Madness</li>
</a>
</ul>
</li>
</ul>
</div>
<section class="section" id="home">
<h2>Welcome to Mommy Info</h2>
<div>
Whether you've been there and done that, or you're coming in for your first stop, this is the site for you.
<p>
Visit the Pregnancy page to access all kinds of information relating to carrying your little one.
<br> Visit the All About Baby page to see all sorts of facts about how the baby is growing, advice about raising him or her, and how to encourage healthy development.
<br> Looking for help deciding how to feed your little one or how to stay fit, visit the Health page!
<br> Maybe you're looking for ideas to celebrate milestones in your baby's life, check out the Party Momma or Memory Markers tabs!
<br> Stressed about what to get for your baby? Visit the Stations or Reviews tabs!
<br> Finally, if you're just wanting to take a gander at the madness that is my life, visit my blog!
</p>
</div>
</section>
<aside class="section" id="about">
<h2>You're on the Home Page!</h2>
<ul class="nav">
<li><a href="mmblog.php">The Mommy Behind the Madness</a></li>
<li><a href="about.php">About Mommy Info</a></li>
<li><a href="contact.php">Contact Mommy Info</a></li>
</ul>
<div class="hide" id="blogposts">
<h2>Recent Madness</h2>
<p>Five Months, and What Have I Done?!</p>
<p>Four Months, and What Do I Need?</p>
<p>Three Months, and Help! What's Happening!?</p>
<p>Two Months</p>
<p>It's Positive!</p>
</div>
</aside>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
</body>
你为什么要把HTML变得如此复杂而变得如此简单？你是什么意思？
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 5px 5px 5px;
color:#696969;
display:inline;
float:left;
width:60%;
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:33%;
}
.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;
height: 100%;
}
#handle:hover #navSmall {
display: inline;
}
.sub-menu-small{
display: none;
background-color: #9ac9ed;
position: relative;
}
.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: 100px;
position: absolute;
}
#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: 120px;
}
.section{
width: 95%;
}
#about{
display: none;
}
#handle{
display: block;
}
.navMenu {
display: none;
}
}
/* Tables on Diaper Bag*/
table {
width: 100%;
text-align: center;
}
table th {
font-size: 28px;
}
table td {
font-size: 15px;
font-family: "Comic Sans MS", sans-serif;
font-weight: bold;
}
#main {
color: #66CDAA;
}
#quick {
color: #809dc6;
}
#car {
color: #95b6c0;
}
#item, .item {
color: #9c9c9c;
}
.mainBag {
background-color: rgba(102, 205, 170, 0.1);
}
.toiletries {
background-color: rgba(128, 157, 198, 0.1);
}
.firstAid {
background-color: rgba(149, 182, 192, 0.1);
}
table td {
border: solid thin gray;
border-top:none;
border-right: none;
}
.right {
background-color: palegreen;
}
.wrong {
background-color: #ffc5b7;
}
.girl {
background-color: lightpink;
}
.boy {
background-color: lightblue;
}
.section p {
font-family: "Times New Roman", serif;
}
.items {
font-size: 20px;
font-family: "Times New Roman", serif;
color: #95b6c0;
}
.itemDesc{
font-size: 18px;
color: #6b6b6b;
}