响应式设计顶部导航

我试图让我的媒体查询中的导航栏在父元素"复选框"下正常显示其子列表，尽管子菜单位于列表其余部分的顶部，并且没有像我想要的那样"推动"列表的其余部分。我是 html 和 css 的初学者，所以我可能犯了一些愚蠢的错误，但非常感谢在这件事上的任何帮助，我真的无法弄清楚我做错了什么。

该问题与媒体查询最大宽度：576px有关。

nav {
width: 17%;
float: left;
padding-top: 4px;
margin-left: 0.5em;
margin-right: 0.6em;
}
/*210/1200*/
nav ul {
list-style: none;
padding-left: 2.14%;
}
/*3/140? = 0.125% ändra padding til procent här?*/
nav ul ul {
margin-left: 5%;
}
nav li {
margin-top: 2px;
display: block;
}
nav a {
display: block;
border: 1px solid grey;
padding: 4px;
text-decoration: none;
color: white;
border-radius: 5px 5px 5px 5px;
background-color: #225d66;
}
/*display block gör att länkarna fyller ut hela bredden för kolumen*/
nav a:link {
background-color: #225d66;
}
nav a:hover {
background-color: #22a4b3;
}
nav ul li ul li {
padding-top: 1px;
display: block;
}
#lokalnav a {
background-color: #2e7d87;
}
#lokalnav a:hover {
background-color: #3fa9b5;
}
nav #thisPage:before {
content: "> ";
}
nav #thisPage {
color: yellow;
}
nav #thisSection:before {
content: "> ";
}
nav #thisSection {
color: yellow;
}
.submenu {
cursor: pointer;
display: block;
}
.submenu ul {
display: none;
}
.submenu input {
display: none;
}
.submenu input:checked~ul {
display: block;
}
@media screen and (max-width: 620px) {
nav {
float: none;
width: 100%;
margin-top: -22px;
margin-left: 1px;
}
nav ul li {
display: inline-block;
position: relative;
}
nav a {
text-align: center;
border-radius: 0px 0px 5px 5px;
padding: 7px 12px 7px 12px;
}
#lokalnav {
position: absolute;
z-index: 1;
}
nav ul li ul li {
margin-top: 0px;
margin-bottom: 0;
}
nav ul li a:not(:only-child):after {
content: " ▾";
padding-left: 6px;
}
#dropdownbtn {
padding-top: 4px;
}
.topnav a {
padding-right: 2px;
}
main {
margin: 2px;
}
header {
height: 170px;
margin-bottom: 0px;
padding-bottom: 0px;
}
#coursenotes {
float: none;
font-size: 11px;
width: 100%;
margin-bottom: -70px;
font-size: 12px;
padding-left: 10px;
}
#content {
float: none;
width: 100%;
}
#coursenotes a:hover {
font-size: 10px;
}
}
@media screen and (max-width:576px) {
header {
background-size: contain;
}
#steps figure {
float: none;
}
}
@media screen and (max-width: 480px) {
nav ul li {
display: block;
width: 100%;
}
}

<nav>
<ul>
<li><a href="inlogpage.html">Hem</a></li>
<li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">
<ul id="lokalnav">
<li><a href="matematik.html" id="thisPage">Matte</a></li>
<li><a href="svenska.html">Svenska</a></li>
<li><a href="engelska.html">Engelska</a></li>
<li><a href="no.html">NO</a></li>
<li><a href="bild.html">Bild</a></li>
<li><a href="so.html">SO</a></li> 
</ul>
</label>
</li>
<li><a href="minainlämningar.html" id="thisSection">Mina Inlämningar</a></li>
<li><a href="laxhjalp.html">Läxhjälp</a></li>
<li><a href="kontaktformular.html">Kontakt</a></li>
</ul>
</nav>

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>    
</ul>
</div>  
</nav>
<br>
</body>
</html>

在媒体查询中从下面的类中删除position:absolute。另请检查更新的代码片段

#lokalnav {
z-index: 1;
}

nav {
width: 17%;
float: left;
padding-top: 4px;
margin-left: 0.5em;
margin-right: 0.6em;
}
/*210/1200*/
nav ul {
list-style: none;
padding-left: 2.14%;
}
/*3/140? = 0.125% ändra padding til procent här?*/
nav ul ul {
margin-left: 5%;
}
nav li {
margin-top: 2px;
display: block;
}
nav a {
display: block;
border: 1px solid grey;
padding: 4px;
text-decoration: none;
color: white;
border-radius: 5px 5px 5px 5px;
background-color: #225d66;
}
/*display block gör att länkarna fyller ut hela bredden för kolumen*/
nav a:link {
background-color: #225d66;
}
nav a:hover {
background-color: #22a4b3;
}
nav ul li ul li {
padding-top: 1px;
display: block;
}
#lokalnav a {
background-color: #2e7d87;
}
#lokalnav a:hover {
background-color: #3fa9b5;
}
nav #thisPage:before {
content: "> ";
}
nav #thisPage {
color: yellow;
}
nav #thisSection:before {
content: "> ";
}
nav #thisSection {
color: yellow;
}
.submenu {
cursor: pointer;
display: block;
}
.submenu ul {
display: none;
}
.submenu input {
display: none;
}
.submenu input:checked~ul {
display: block;
}
@media screen and (max-width: 620px) {
nav {
float: none;
width: 100%;
margin-top: -22px;
margin-left: 1px;
}
nav ul li {
display: inline-block;
position: relative;
}
nav a {
text-align: center;
border-radius: 0px 0px 5px 5px;
padding: 7px 12px 7px 12px;
}
#lokalnav {
z-index: 1;
}
nav ul li ul li {
margin-top: 0px;
margin-bottom: 0;
}
nav ul li a:not(:only-child):after {
content: " ?";
padding-left: 6px;
}
#dropdownbtn {
padding-top: 4px;
}
.topnav a {
padding-right: 2px;
}
main {
margin: 2px;
}
header {
height: 170px;
margin-bottom: 0px;
padding-bottom: 0px;
}
#coursenotes {
float: none;
font-size: 11px;
width: 100%;
margin-bottom: -70px;
font-size: 12px;
padding-left: 10px;
}
#content {
float: none;
width: 100%;
}
#coursenotes a:hover {
font-size: 10px;
}
}
@media screen and (max-width:576px) {
header {
background-size: contain;
}
#steps figure {
float: none;
}
}
@media screen and (max-width: 480px) {
nav ul li {
display: block;
width: 100%;
}
}

<nav>
<ul>
<li><a href="inlogpage.html">Hem</a></li>
<li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">

<ul id="lokalnav">
<li><a href="matematik.html" id="thisPage">Matte</a></li>
<li><a href="svenska.html">Svenska</a></li>
<li><a href="engelska.html">Engelska</a></li>
<li><a href="no.html">NO</a></li>
<li><a href="bild.html">Bild</a></li>
<li><a href="so.html">SO</a></li> 
</ul>
</label>
</li>
<li><a href="minainlämningar.html" id="thisSection">Mina Inlämningar</a></li>
<li><a href="laxhjalp.html">Läxhjälp</a></li>
<li><a href="kontaktformular.html">Kontakt</a></li>
</ul>
</nav>

将此 css 样式添加到媒体最大宽度：576px

#lokalnav {
position: relative;
}

相关内容

最新更新

热门标签：