This drop-down uses the the adjacent sibling combinator (+) to select the adjacent sibling using it's pseudo selectors.
A Pen by Fadil Eledath on CodePen.
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.2.0/css/font-awesome.min.css" /> | |
<link href='http://fonts.googleapis.com/css?family=Slabo+27px|Open+Sans' rel='stylesheet' type='text/css'> | |
<nav> | |
<ul id="header"> | |
<a href="#" id="brand"> | |
<li> | |
Pure CSS Dropdown | |
</li> | |
</a> | |
<label id="trigger2" for="x7"><i class="fa fa-bars"></i></label> | |
</ul> | |
<input type="checkbox" id="x7" /> | |
<ul id="main"> | |
<a href="#"> | |
<li class="x1"> | |
Link 1 | |
</li> | |
</a> | |
<a href="#"> | |
<li class="x1"> | |
Link 2 | |
</li> | |
</a> | |
<a href="#"> | |
<li class="x1"> | |
Link 3 | |
</li> | |
</a> | |
<a href="#" id="trigger"> | |
<li class="x1"> | |
Dropdown | |
<span id="caret"></span> | |
</li> | |
</a> | |
<ul id="dropdown"> | |
<a href="#"> | |
<li> | |
Link 1 | |
</li> | |
</a> | |
<a href="#"> | |
<li> | |
Link 2 | |
</li> | |
</a> | |
<a href="#"> | |
<li> | |
Link 3 | |
</li> | |
</a> | |
<a href="#"> | |
<li> | |
Link 4 | |
</li> | |
</a> | |
</ul> | |
</ul> | |
</nav> | |
<main> | |
<header> | |
<h1> | |
Pure CSS Dropdown | |
</h1> | |
</header> | |
<p> | |
<a href="http://codepen.io/FadilE/pen/gbyVqV" target="_blank">Like it? Check out the new Pure Responsive CSS Menu</a><br><br> | |
The adjacent sibling combinator is made of the "plus sign" character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one. | |
<br> | |
<br> | |
<a id="src" href="http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators"> | |
(Source: http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators) | |
</a> | |
</p> | |
</main> |
This drop-down uses the the adjacent sibling combinator (+) to select the adjacent sibling using it's pseudo selectors.
A Pen by Fadil Eledath on CodePen.
main p a { | |
color: #fff; | |
font-size: 1.2em; | |
text-decoration: underline; | |
} | |
#header { | |
left: 0; | |
float: left; | |
width: auto; | |
z-index: 1000; | |
} | |
#caret { | |
display: inline-block; | |
height: 7px; | |
width: 7px; | |
border-left: 3px solid #fff; | |
border-bottom: 3px solid #fff; | |
transform: rotate(-45deg) translateY(-4px); | |
} | |
body { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
font-family: 'Open Sans', sans-serif; | |
background: #769bbe; | |
} | |
li, #trigger2, #trigger { | |
top:0; | |
list-style-type: none; | |
display: inline-block; | |
padding: 13px; | |
color: #f2f2f2; | |
transition: 0.2s; | |
} | |
ul { | |
margin-top: 0; | |
position: absolute; | |
top: 0; | |
background: #496E91; | |
display: block; | |
width: 100%; | |
height: 3em; | |
text-align: right; | |
padding-left: 0; | |
padding-right: 0; | |
} | |
#main { | |
left: 0; | |
} | |
li:hover, #trigger2:hover { | |
color: #496E91; | |
background: #f2f2f2; | |
} | |
#dropdown { | |
top: 3em; | |
background-color: #34526E; | |
height: 0; | |
overflow: hidden; | |
width: auto; | |
right: 2.1em; | |
transition: 0.5s; | |
z-index: 2000; | |
} | |
#dropdown li { | |
display: block; | |
padding-left: 10px; | |
padding-right: 50px; | |
text-align: left; | |
} | |
a { | |
text-decoration: none; | |
} | |
#dwn { | |
font-size: 0.8em; | |
} | |
#trigger:hover + #dropdown, #dropdown:hover { | |
height: 12em; | |
} | |
main { | |
position: absolute; | |
top: 2.8em; | |
} | |
main { | |
width: 100%; | |
text-align: center; | |
} | |
h1 { | |
font-family: 'Slabo 27px', serif; | |
font-size: 2.5em; | |
color: #f2f2f2; | |
} | |
p { | |
color: #f2f2f2; | |
padding-left: 50px; | |
padding-right: 50px; | |
} | |
a { | |
color: #f2f2f2; | |
} | |
#trigger:hover { | |
color: #496E91; | |
} | |
.x1 { | |
position: relative; | |
top: -0.8em; | |
} | |
#src { | |
text-decoration: underline; | |
} | |
#src:hover { | |
text-decoration: none; | |
} | |
#trigger2 { | |
display: none !important; | |
} | |
#x7 { | |
left: 999999px; | |
} | |
@media (max-width: 627px) { | |
#header { | |
width: 100%; | |
} | |
#brand { | |
position: absolute; | |
top: 0; | |
left: 0; | |
} | |
#main { | |
height: 0; | |
overflow: hidden; | |
z-index: 3000; | |
top: 3em; | |
text-align: left; | |
transition: 0.5s; | |
} | |
#main li, #trigger { | |
display: block; | |
} | |
#dropdown { | |
position: static; | |
} | |
#trigger2 { | |
display: inline-block !important; | |
position: absolute; | |
top: 0; | |
right: 0; | |
cursor: pointer; | |
} | |
#x7:checked + #main { | |
height: auto; | |
padding-top: 1em; | |
} | |
#dropdown { | |
position: relative; | |
top: -1.6em !important; | |
right: 0em; | |
width: 100%; | |
} | |
} |