Last active
February 2, 2020 21:01
-
-
Save Maruz/4e516cc042aeac01cbb98354bee67040 to your computer and use it in GitHub Desktop.
CSS meny
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>CSS meny</title> | |
<style> | |
/* Generelle stiler */ | |
* { | |
margin: 0px; | |
padding: 0px; | |
} | |
a span { | |
margin-left: 8px; | |
} | |
/* Stiler for meny */ | |
.meny a { | |
color: white; | |
background-color: dimgrey; | |
height: 64px; | |
font-family: sans-serif; | |
text-decoration: none; | |
text-transform: uppercase; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.meny a:hover { | |
background-color: darkgray; | |
} | |
.meny ul { | |
display: flex; | |
list-style: none; | |
} | |
.meny li { | |
width: 100%; | |
height: 100%; | |
text-align: center; | |
position: relative; | |
} | |
.dropdown ul { | |
display: none; | |
} | |
.dropdown:hover > ul { | |
display: block; | |
} | |
/* Stiler for undermeny */ | |
.undermeny, | |
.undermeny ul { | |
display: flex; | |
flex-direction: column; | |
position: absolute; | |
width: 100%; | |
} | |
.undermeny ul { | |
display: none; | |
top: 0px; | |
left: 100%; | |
} | |
.undermeny > li:hover ul { | |
display: block; | |
} | |
</style> | |
</head> | |
<body> | |
<nav class="meny"> | |
<ul> | |
<li><a href="#">Hjem</a></li> | |
<li class="dropdown"> | |
<a href="#">Produkter <span>▼</span></a> | |
<ul class="undermeny"> | |
<li> | |
<a href="#">Sko <span>▶</span></a> | |
<ul> | |
<li><a href="#nike">Nike</a></li> | |
<li><a href="#puma">Puma</a></li> | |
<li><a href="#converse">Converse</a></li> | |
</ul> | |
</li> | |
<li> | |
<a href="#">Gensere <span>▶</span></a> | |
<ul> | |
<li><a href="#adidas">Adidas</a></li> | |
<li><a href="#champion">Champion</a></li> | |
<li><a href="#diesel">Diesel</a></li> | |
</ul> | |
</li> | |
</ul> | |
</li> | |
<li><a href="#">Om Oss</a></li> | |
<li><a href="#">Kontakt</a></li> | |
</ul> | |
</nav> | |
<section> | |
<h1>Velkommen</h1> | |
</section> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment