Created
August 22, 2018 06:22
-
-
Save CodeMyUI/50d2ebd593a442d2b10c4e33bab4900e to your computer and use it in GitHub Desktop.
Simple Pure CSS Dropdown Menu BY Connor Brassington
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
<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"> |
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
*, | |
*: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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
as seen on https://codepen.io/connorbrassington/pen/raNrEW