Skip to content

Instantly share code, notes, and snippets.

@phinton2

phinton2/dabblet.css

Last active December 18, 2020 20:44
Show Gist options
  • Save phinton2/d70238aff31bf2ec194e69e3a0d14e07 to your computer and use it in GitHub Desktop.
Save phinton2/d70238aff31bf2ec194e69e3a0d14e07 to your computer and use it in GitHub Desktop.
Download ZIP
Small Dropdown Project
Raw
dabblet.css
/**
* Small Dropdown Project
*/
/* background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;*/
body {
background:url("https://s1.1zoom.me/b5156/457/Winter_Forests_Houses_Snow_Night_Spruce_555610_1920x1080.jpg") no-repeat;
background-size: cover;
color:white;
font-family: 'Alegreya Sans';
}
ul {
margin: 0px;
padding: 0px;
list-style:none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: 0.8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
color: yellow;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display:block;
}
div {
position: absolute;
left: 400px;
margin: 0 auto;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<html>
<div>
<ul>
<li><a>Home</a></li>
<li><a>About</a>
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission & Vision</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li><a>Things to do</a>
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li><a>Contact</a>
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li><a>News</li></a>
</ul>
</div>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment