Skip to content

Instantly share code, notes, and snippets.

@mrryanjohnston

mrryanjohnston/index.css

Created January 30, 2021 18:41
Show Gist options
  • Save mrryanjohnston/6d0a39f393965e81431b07bdc13fefad to your computer and use it in GitHub Desktop.
Save mrryanjohnston/6d0a39f393965e81431b07bdc13fefad to your computer and use it in GitHub Desktop.
Download ZIP
css menu
Raw
index.css
body {
display: flex;
height: 100%;
margin: 0;
}
nav {
background-color: #aaa;
flex: 25%;
height: 100%;
position: fixed;
}
nav ul {
display: none;
padding: 0;
position: absolute;
top: 0;
left: 100%;
list-style: none;
width: 100%;
}
nav li {
background-color: #aaa;
width: 100%;
}
nav > ul {
display: initial;
position: relative;
top: initial;
left: initial;
}
nav > ul > li {
position: relative;
}
nav li:hover > ul {
display: initial;
}
nav a {
display: block;
padding: 10px;
width: 100%;
}
main {
flex: 75;
}
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<h1>admin.ryjo.codes</h1>
<ul>
<li>
<a href="#foo">Foo</a>
<ul id="foo">
<li>
<a href="#bar">Bar</a>
<ul id="bar">
<li>
<a href="#baz">Baz</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#bread">Bread</a>
<ul id="bread">
<li>
<a href="#salami">Salami</a>
<ul id="salami">
<li><a href="#cheese">Cheese</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<main>
<header></header>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment