Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Aug 22, 2018

Embed
What would you like to do?
Simple Pure CSS Dropdown Menu BY Connor Brassington
<div class="container">
<div class="tutorial">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Services <i class="fa fa-angle-down"></i>
<ul>
<li>Graphic Design</li>
<li>Website Design </li>
<li>Python Programming</li>
<li>PHP Programming</li>
</ul>
</li>
<li>Tutorials <i class="fa fa-angle-down"></i>
<ul>
<li>CSS <span>12 Available</span></li>
<li>HTML <span>9 Available</span></li>
<li>Jade<span>3 Available</span></li>
<li>Javascript<span>21 Available</span></li>
<li>Design<span>37 Available</span></li>
</ul>
</li>
<li>Contact</li>
</ul>
<div class="slider"></div>
<div class="information">
<p>A simple, clean looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.</p>
</div>
</div>
</div><link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
background-color: #EEEEEE;
}
.container {
width: 100%;
height: 100%;
}
.tutorial {
width: 80%;
margin: 5% auto 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
max-width: 800px;
}
.tutorial .slider {
width: 100%;
height: 300px;
background-color: #F03861;
}
.tutorial .information {
width: 100%;
padding: 20px 50px;
margin-bottom: 30px;
font-family: "Open Sans", sans-serif;
}
.tutorial .information h1 {
color: #333;
font-size: 1.5rem;
padding: 0px 10px;
border-left: 3px solid #F03861;
}
.tutorial .information h3 {
color: #e0e0e0;
font-size: 1rem;
font-weight: 300;
padding: 0px 10px;
border-left: 3px solid #F03861;
}
.tutorial .information p {
padding: 10px 0px;
}
.tutorial ul {
font-size: 0;
list-style-type: none;
}
.tutorial ul li {
font-family: "Open Sans", sans-serif;
font-size: 1rem;
font-weight: 400;
color: #333;
display: inline-block;
padding: 15px;
position: relative;
}
.tutorial ul li ul {
display: none;
}
.tutorial ul li:hover {
cursor: pointer;
background-color: #f2f2f2;
}
.tutorial ul li:hover ul {
display: block;
margin-top: 15px;
width: 200px;
left: 0;
position: absolute;
}
.tutorial ul li:hover ul li {
display: block;
background-color: #e7e7e7;
}
.tutorial ul li:hover ul li span {
float: right;
color: #f9f9f9;
background-color: #F03861;
padding: 2px 5px;
text-align: center;
font-size: .8rem;
border-radius: 3px;
}
.tutorial ul li:hover ul li:hover {
background-color: #e0e0e0;
}
.tutorial ul li:hover ul li:hover span {
background-color: #ee204e;
}
@CodeMyUI

This comment has been minimized.

Copy link
Owner Author

CodeMyUI commented Aug 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.