Hvorfor kollapser menu
Nedenstående menu kollapser når jeg ændrer class'en "nav label ul" style position fra relative til absolute.1. Hvorfor gør den det? (jeg har brug for at definere den som absolute da jeg skal have en transition height på den)
[code]
<!doctype html>
<html lang="da-DK" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
html {
font-family: "Lucida Sans", sans-serif;
font-size: 12pt;
}
@font-face {
font-family: serpentine;
src: url(font/serpentine.ttf);
}
* {
box-sizing: border-box;
}
a.menu:link {
color: white;
}
a.menu:active {
color: white;
}
a.menu:visited {
color: white;
}
a.menu:hover {
color: white;
}
body {
margin: 0px;
background: white;
}
input {
display: none;
}
[class*="col-"] {
float: left;
padding: 10px;
}
.row::after {
content: "";
clear: both;
display: table;
}
/* For mobile phones */
[class*="col-"] {
width: 100%;
}
header {
position: relative;
font-size: 25pt;
text-align: center;
color: white;
background-color: #476699;
border-bottom: 5px solid #97b0d8;
}
header img {
width: 100%;
}
header div {
font-size: 10pt;
}
.menuknap {
position: absolute;
width: 35px;
height: 35px;
bottom: 10px;
right: 10px;
padding: 3px;
cursor: pointer;
}
.menuknap div {
float: left;
height: 4px;
width: 100%;
margin: 2px 0px; 2px;
background-color: #97b0d8;
border-radius: 2px;
}
nav {
position: relative;
display: block;
background-color: #657287;
transition: width 0.5s;
}
#onoff:checked + nav {
width: 0px;
clear: both;
}
nav label {
display: block;
border: 0px solid black;
}
nav label ul {
position: relative; /*hvorfor kollapser hele menuen når position ændres til absolute?*/
height: 30px;
list-style-type: none;
padding: 0px;
overflow: hidden;
}
nav input:checked + label ul {
height: 100%;
}
nav input:checked + label ul li:first-child {
background: #476699;
border-bottom: 1px solid #97b0d8;
border-top: 1px solid #97b0d8;
}
nav label ul li:first-child {
padding-left: 20px;
font-size: 14pt;
transition: background-color 0.5s, border-top 0.5s, border-bottom 0.5s;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}
nav label ul li {
margin-bottom: 0px;
color: white;
}
nav label ul li a {
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
.k1 {
border-top: 1px solid #657287;
border-bottom: 1px solid #657287;
}
.k2-1 {
padding-left: 40px;
}
.k2-2 {
padding-left: 40px;
}
.k3 {
padding-left: 60px;
font-size: 10pt;
}
/* for tablets */
@media only screen and (min-width: 600px) {
.col-1m {width: 8.33%;}
.col-2m {width: 16.66%;}
.col-3m {width: 25%;}
.col-4m {width: 33.33%;}
.col-5m {width: 41.66%;}
.col-6m {width: 50%;}
.col-7m {width: 58.33%;}
.col-8m {width: 66.66%;}
.col-9m {width: 75%;}
.col-10m {width: 83.33%;}
.col-11m {width: 91.66%;}
.col-12m {width: 100%;}
header img {
max-width: 350px;
}
nav {
display: block;
}
header .menuknap {
display: none;
}
}
/*for PC */
@media only screen and (min-width: 780px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="row" >
<header class="col-12" >
<label class="menuknap" for="onoff" >
<div></div><div></div><div></div><div></div>
</label>
</header>
</div>
<div class="row">
<input type="checkbox" id="onoff" >
<nav class="col-4m col-3" id="navmenu" style="padding: 0px;" >
<input type="checkbox" id="kid40" >
<label for="kid40" >
<ul >
<li class="k1" >Hovedkategori</li>
<li class="k2-1" ><a href="#" class="menu" >Underkategori 1</a></li>
<li class="k2-1" ><a href="#" class="menu" >Underkategori 2</a></li>
<li class="k2-1" ><a href="#" class="menu" >Underkategori 3</a></li>
</ul>
</label>
<input type="checkbox" id="kid41" >
<label for="kid41" >
<ul >
<li class="k1" >Hovedkategori 2</li>
<li class="k2-1" ><a href="#" class="menu" >Underkategori 1</a></li>
<li class="k2-1" ><a href="#" class="menu" >Underkategori 2</a></li>
<li class="k2-1" ><a href="#" class="menu" >Underkategori 3</a></li>
</ul>
</label>
</nav>
<div class="col-m8 col-9" >Forside</div>
</div>
</body>
</html>
[/code]
