I want to create a circle with lines on the right and bottom in CSS. Similar on the picture below. I found a css code that connect circles horizontally. I cannot figure out how will add the line vertically or similar to the image I attached?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#import "compass/css3";
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before {
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: dodgerblue;
z-index: -1;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active ~ li {
background: lightblue;
}
.active ~ li::before {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="active">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
Use a combination of pseudo-elements to achieve the goal.
ul {
list-style: none;
margin: 50px;
padding: 0;
font: normal 16px/22px Arial;
color: #999;
}
li {
overflow: hidden;
position: relative;
padding: 0 0 10px 35px;
}
li::before {
content: '';
position: absolute;
left: 9px;
top: 9px;
width: 20px;
height: 999px;
border: 2px solid lightblue;
border-width: 2px 0 0 2px;
}
li:last-child::before {
border-width: 2px 0 0;
}
li::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
background: #fff;
border: 2px solid lightblue;
border-radius: 50%;
}
li.current,
li.passed {
color: #000;
}
li.current::before {
border-top-color: dodgerblue;
}
li.current::after {
border-color: dodgerblue;
background: dodgerblue;
}
li.passed::before,
li.passed::after {
border-color: dodgerblue;
}
<ul>
<li class="passed">Step #1</li>
<li class="passed">Step #2</li>
<li class="passed">Step #3</li>
<li class="current">Step #4<br><small><i>Description of the step</i></small></li>
<li>Step #5</li>
<li>Step #6</li>
<li>Step #7</li>
</ul>
See jsfiddle if you prefer
Check out updated pen :
http://codepen.io/Debabrata89/pen/QNZrxE
Below are the relevant code:
HTML:
<div></div><span id="step1">step1</span>
<div id="second"></div>
<div></div><span id="step2">step2</span>
<div id="last"></div>
CSS:
#import "compass/css3";
div {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: dodgerblue;
margin: 0 1em;
color: white;
position: relative;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
div::before{
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: dodgerblue;
z-index: -1;
}
div:first-child::after {
display: none;
}
body {
font-family: sans-serif;
padding: 2em;
}
#last{
transform: rotate(-90deg);
width:0;
height:0;
}
#second{
transform: rotate(-90deg);
width:0;
height:10;
left:16px;
top:-16px;
}
#step1{
position:absolute;
top:40px;
left:150px
}
#step2{
position:absolute;
top:104px;
left:150px
}
Try this fiddle .
I changed some properties and added li:after.
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: dodgerblue;
margin: 1em 1em;
color: white;
position: relative;
}
li::before {
content: '';
position: absolute;
top: -4.1em;
left: 1em;
/* width: 4em; */
width: .2em;
height: 2em;
background: dodgerblue;
z-index: -1;
}
li::after {
content: '';
position: absolute;
top: 0.9em;
left: 1em;
width: 4em;
height: .2em;
background: dodgerblue;
z-index: -1;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active ~ li {
background: lightblue;
}
.active ~ li::before {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
Related
I'm using some code found at codepen with a Stepper Control. I'm not vey skilled with CSS and I'm having an issue not presented in codepen, so I assume is another CSS class defined in a very long stylesheet that is shared with other team mates. The problem I tried to fix is that the line defined in the class .progressbar li:after remains above the class .progressbar li:before, that defines the circles.
li:after initially came with a z-index: -1 and li:before didn't have the z-index property, but the lines didn't appear, they were hidden behind a div, so I had to modify it and that's what is shown in the snippet. Although this z-index: -1 works in the snippet, is not working where I want to be implemented.
This first image shows the result of the CSS Stepper, taken directly from codepen to my page with z-index:-1
This other image shows the result after trying to adjust the z-index property:
This is the desired output:
Here's the snippet:
.container {
width: 600px;
margin: 100px auto;
z-index: -1;
}
.progressbar li {
list-style-type: none;
width: 25%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #666666;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #666666;
top: 15px;
left: -50%;
display: block;
z-index: 1;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
line-height: 30px;
border: 2px solid #666666;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
z-index: 999999;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active + li:after {
background-color: #55b776;
}
<div class="container">
<ul class="progressbar">
<li >aaaaaa</li>
<li class="active">bbbbbbbbbt</li>
<li>cccccccc</li>
<li>ddddddddd</li>
</ul>
</div>
¿Could I get some help to solve this problem, or where could I start looking?
I think it's all said, but please, if I left something, I'll try to complete the post.
Thanks in advance,
You just need to reduce the z-index of .progressbar li:after like this (no other changes required):
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #666666;
top: 15px;
left: -50%;
display: block;
z-index: -999999;
}
You can see it working below:
.container {
width: 600px;
margin: 100px auto;
z-index: -1;
}
.progressbar li {
list-style-type: none;
width: 25%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #666666;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #666666;
top: 15px;
left: -50%;
display: block;
z-index: -999999;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
line-height: 30px;
border: 2px solid #666666;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
z-index: 999999;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active+li:after {
background-color: #55b776;
}
<div class="container">
<ul class="progressbar">
<li>aaaaaa</li>
<li class="active">bbbbbbbbbt</li>
<li>cccccccc</li>
<li>ddddddddd</li>
</ul>
</div>
You must give the element a position-value in order to use z-index. Just apply position: relative; to the .progressbar li:before-element:
.container {
width: 600px;
margin: 100px auto;
}
.progressbar li {
list-style-type: none;
width: 25%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #666666;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #666666;
top: 15px;
left: -50%;
display: block;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
line-height: 30px;
border: 2px solid #666666;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
position: relative;
z-index: 1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active+li:after {
background-color: #55b776;
}
<div class="container">
<ul class="progressbar">
<li>aaaaaa</li>
<li class="active">bbbbbbbbbt</li>
<li>cccccccc</li>
<li>ddddddddd</li>
</ul>
</div>
I want to make like this but my top bar is to different i dont know how to make like this
.top-bar {
width: 100%;
height: 40px;
border: solid 1px white;
}
Please try following example. I think you can use or customize some value.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
font-size: 14px;
padding: 70px;
background: #f69ec4;
}
.tabs {
margin-bottom: 30px;
}
nav,
.content {
min-width: 600px;
}
.content {
max-width: 600px;
display: block;
margin-bottom: 1em;
background: #32557f;
padding: 2em 3em;
border-radius: .15em;
border: .2em solid #fff;
color: #fff;
}
nav {
position: relative;
z-index: 1;
}
nav > a {
position: relative;
width: 10em;
display: inline-block;
padding: .7em 2em .5em;
color: #fff;
text-decoration: none;
margin: 0 -.3em;
}
nav > a::before {
border: .2em solid #fff;
}
nav a::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-bottom: none;
border-radius: 1em 1em 0 0;
background: #7eb4e2;
transform: scale(1.2, 1.3) perspective(0.5em) rotateX(5deg);
}
nav a.active {
z-index: 2;
}
nav a.active::before {
background-color: #32557f;
margin-bottom: -.08em;
}
.tab-left-right nav {
padding-left: 1.3em;
}
.tab-left-right nav a::before {
transform-origin: bottom;
}
<div class="tabs tab-left-right">
<nav>
Tab1
Tab2
Tab3
</nav>
<div class="content" id="content1">Content</div>
</div>
I use ul list
.open-file-list {
position: absolute;
top: 45px;
top: var(--header-height);
height: 30px;
width: 100%;
background-color: var(--primary-color);
overflow-x: auto !important;
overflow-y: hidden !important;
display: flex;
flex-direction: row !important;
color: white;
color: var(--text-main-color)
}
.open-file-list li.tile {
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
height: 30px;
position: relative;
overflow: hidden;
font-size: 0.8em;
align-items: center;
margin: 0;
padding: 0;
color: inherit
}
.open-file-list li.tile::before{
position: absolute;
content: '';
background-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-bottom: none;
border-radius: 1em 1em 0 0;
background: #7eb4e2;
transform: scale(1.2, 1.3) perspective(0.5em) rotateX(5deg);
height: 30px;
}
.open-file-list li.tile.text{
display: inline-block;
white-space: nowrap;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
padding-right: 10px;
color: inherit
}
.open-file-list li.tile.select {
position: absolute;
left: 0;
top: 0
}
.open-file-list li.tile.notice::before {
content: '♥';
color: #00ff00;
font-size: 1em;
margin-left: 2.5px
}
.open-file-list li.tile.active {
border-top: solid 2px #00ee00;
background-color: rgba(0,0,0,0.2)
}
.open-file-list li.tile .file,.open-file-list li.tile .icon {
height: 20px;
width: 20px;
font-size: 1em;
background-size: 14px;
background-position: center;
color: inherit
}
I have my progresbar written in css and line between first and second circle hovers a little the number "2". The lines beetwen circles are pseudelements.
This is the styles i used:
/* progressbar */
.progressbar {
width: 100%;
counter-reset: step;
margin-top: 7px;
padding: 0;
}
.progressbar li {
list-style-type: none;
float: left;
width: 100px;
position: relative;
text-align: center;
font-family: sans-serif;
font-size: 15px;
font-weight: normal;
color: #546A79;
/* Steps*/
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 44px;
height: 44px;
line-height: 44px;
/* border: 4px solid #fff; */
display: block;
text-align: center;
margin: 0 auto 13px auto;
border-radius: 50%;
background-color: #E3E3E3;
/* Circles*/
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #E3E3E3;
/*lines */
top: 20px;
left: -50%;
z-index: 0;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: #546A79;
}
.progressbar li.active:before {
width: 48px;
height: 48px;
line-height: 48px;
border-radius: 50%;
border-color: #0073CF;
color: black;
background-color: #ffda47;
margin: 0 auto 9px auto;
}
.progressbar li.active + li.active:after {
background-color: #ffda47;
}
Here's jsfiddle of the problem:
http://jsfiddle.net/1aeur58f/523/
.progressbar li {
list-style-type: none;
float: left;
width: 100px;
position: relative;
text-align: center;
font-family: sans-serif;
font-size: 15px;
font-weight: normal;
color: #546A79;
z-index:1;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #E3E3E3;
/*lines */
top: 20px;
left: -50%;
/*z-index: 0;*/
z-index: -1;
}
for ".progressbar li:after" now its z-index:-1; make this z-index:-1;
and z-index:1; for ".progressbar li" your ul item.
The first dropdown is working normally, but the second I can not make it work at all. I have tried to specify more the classes, but does not work, I believe it is something very simple that I am passing unnoticed. I'll be grateful if someone help me.
The dropdown I say is in the "Other Consoles" menu, it was to show the div with the class "dropdown-content-2" when hovering the "a" tag with the "drop-secundario" class.
.header-menu {
float: right;
height: auto;
font-size: 0;
margin-right: 20px;
}
.header-menu ul li {
height: auto;
display: inline-block;
}
.header-menu ul li.dropdown {
position: relative;
}
.dropdown {
cursor: pointer;
}
.header-menu ul li a {
padding: 0 13px;
text-align: center;
color: #000;
font-size: 16px;
line-height: 70px;
display: block;
font-family: 'Roboto', sans-serif;
font-weight: 700;
letter-spacing: 0.2px;
text-decoration: none;
}
.header-menu ul li:hover {
background: #ff0000;
}
/*Dropdown Menu*/
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
background: #ff0000;
width: 180px;
right: 0;
transition: all 0.15s ease-in;
}
.header-menu ul li .dropdown-content a {
line-height: 50px;
height: 50px;
font-size: 16px;
color: #000;
text-decoration: none;
display: block;
text-align: left;
text-indent: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
.header-menu ul li .dropdown-content a:hover {
background: red;
color: #fff;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
top: 70px;
}
.arrow-down:after {
content: "";
display: inline-block;
vertical-align: middle;
margin: 0 3px 3px 6px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}
/*Dropdown 2*/
.dropdown-content a.drop-secundario {
position: relative;
}
.dropdown-content-2 {
visibility: hidden;
opacity: 0;
position: absolute;
background: #fff;
width: 200px;
right: 0;
transition: all 0.15s ease-in;
}
.dropdown-content a.drop-secundario:hover .dropdown-content-2 {
visibility: visible;
opacity: 1;
}
<nav class="header-menu">
<ul>
<li>PS4</li>
<li>XBOX ONE</li>
<li>PC</li>
<li>eSports</li>
<li>Reviews</li>
<li>Vídeos</li>
<li>Lançamentos</li>
<li class="dropdown">
<a class="arrow-down">Mais</a>
<div class="dropdown-content">
<a class="drop-secundario">Outros Consoles</a>
<div class="dropdown-content-2">
PS3
XBOX 360
Switch
WII U
3DS
PS Vita
Retrô
</div>
Autores
</div>
</li>
</ul>
</nav>
Change the selector of your last CSS rule to this:
.dropdown-content a.drop-secundario:hover+.dropdown-content-2
The reason for this: .dropdown-content-2 is not a child of a.drop-secundario, but its sibling, therefore the "+" in that selector.
.header-menu {
float: right;
height: auto;
font-size: 0;
margin-right: 20px;
}
.header-menu ul li {
height: auto;
display: inline-block;
}
.header-menu ul li.dropdown {
position: relative;
}
.dropdown {
cursor: pointer;
}
.header-menu ul li a {
padding: 0 13px;
text-align: center;
color: #000;
font-size: 16px;
line-height: 70px;
display: block;
font-family: 'Roboto', sans-serif;
font-weight: 700;
letter-spacing: 0.2px;
text-decoration: none;
}
.header-menu ul li:hover {
background: #ff0000;
}
/*Dropdown Menu*/
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
background: #ff0000;
width: 180px;
right: 0;
transition: all 0.15s ease-in;
}
.header-menu ul li .dropdown-content a {
line-height: 50px;
height: 50px;
font-size: 16px;
color: #000;
text-decoration: none;
display: block;
text-align: left;
text-indent: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
.header-menu ul li .dropdown-content a:hover {
background: red;
color: #fff;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
top: 70px;
}
.arrow-down:after {
content: "";
display: inline-block;
vertical-align: middle;
margin: 0 3px 3px 6px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}
/*Dropdown 2*/
.dropdown-content a.drop-secundario {
position: relative;
}
.dropdown-content-2 {
visibility: hidden;
opacity: 0;
position: absolute;
background: #0fa;
width: 200px;
right: 180px;
top: 0;
transition: all 0.15s ease-in;
}
.dropdown-content .dropdown-content-2:hover,
.dropdown-content a.drop-secundario:hover+.dropdown-content-2 {
visibility: visible;
opacity: 1;
}
<nav class="header-menu">
<ul>
<li>PS4</li>
<li>XBOX ONE</li>
<li>PC</li>
<li>eSports</li>
<li>Reviews</li>
<li>Vídeos</li>
<li>Lançamentos</li>
<li class="dropdown">
<a class="arrow-down">Mais</a>
<div class="dropdown-content">
<a class="drop-secundario">Outros Consoles</a>
<div class="dropdown-content-2">
PS3
XBOX 360
Switch
WII U
3DS
PS Vita
Retrô
</div>
Autores
</div>
</li>
</ul>
</nav>
I'm having issues getting this button to stay in the button holder which floats above my site content. How would I add a drop down menu and this keep it in the same button holder.
.btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family:'Source Sans Pro', sans-serif;
opacity: .8; }
.button:hover {
background-color: #732878; /* Green */
color: white;
}
<div class="btn-holder">
<div class="button"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a></div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
Here's a quick example that should help get you started in the right direction! A few improvements could be made (such as delaying the display:none so that you can actually click links in the menu), but you should be able to figure that out. If not just let me know in the comments and I'll improve it.
#btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#btn-holder > .button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
border-radius: 3px;
}
#btn-holder > .button:hover {
background-color: #732878;
color: white;
}
#btn-holder > .menu {
opacity: 0;
transition: opacity .5s;
width: 100px;
transform: translate(-50%, -50%);
background-color: #333;
border: none;
color: white;
padding: 8px;
text-align: left;
text-decoration: none;
font-size: 16px;
position: absolute;
right: 0%;
bottom: 25px;
box-shadow:0 2px 7px rgba(0,0,0,.4);
}
.menu a {
text-decoration: none;
color: #eee;
transition: color .3s;
}
.menu a:hover {
color: #2196f3;
}
.menu > ul {
list-style: none;
margin: 2px;
padding: 0 0 0 15px;
}
.menu > ul > li:first-child {
margin-left: -15px;
}
.menu p {
opacity: 1;
margin: 0;
}
.menu p:after {
content:"";
display: block;
height: 1px;
vertical-align: bottom;
width: 100%;
border-top: 1px solid #eee;
opacity: .4;
}
#btn-holder > .button:hover + .menu {
opacity: 1;
transistion-delay: 1s;
}
#btn-holder .menu:hover {
opacity: 1;
}
<div id="btn-holder">
<div class="button">
<img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png">
</div>
<div class="menu">
<p>Home</p>
<ul>
<li>Blog</li>
<li>Post 1</li>
<li>Post 2</li>
</ul>
<p>Products</p>
<p>About</p>
</div>
</div>
Here's a codepen of it that you can use to try your own changes on: http://codepen.io/XanderLuciano/pen/YGPoqE
I used the CSS + selector to select the div class="menu" that occurs right after the div class="button" and changed it's display from none to block when .button:hover is active. The code looks like this:
#btn-holder > .button:hover + .menu {
display: block;
}
Let me know if you have any questions! :)
#btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#btn-holder > .button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
border-radius: 3px;
}
#btn-holder > .button:hover {
background-color: #732878;
color: white;
}
#btn-holder > .menu {
opacity: 0;
transition: opacity .5s;
width: 100px;
transform: translate(-50%, -50%);
background-color: #333;
border: none;
color: white;
padding: 8px;
text-align: left;
text-decoration: none;
font-size: 16px;
position: absolute;
right: 0%;
bottom: 25px;
box-shadow:0 2px 7px rgba(0,0,0,.4);
}
.menu a {
text-decoration: none;
color: #eee;
transition: color .3s;
}
.menu a:hover {
color: #2196f3;
}
.menu > ul {
list-style: none;
margin: 2px;
padding: 0 0 0 15px;
}
.menu > ul > li:first-child {
margin-left: -15px;
}
.menu p {
opacity: 1;
margin: 0;
}
.menu p:after {
content:"";
display: block;
height: 1px;
vertical-align: bottom;
width: 100%;
border-top: 1px solid #eee;
opacity: .4;
}
#btn-holder > .button:hover + .menu {
opacity: 1;
transistion-delay: 1s;
}
#btn-holder .menu:hover {
opacity: 1;
}
<div id="btn-holder">
<div class="button">
<img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png">
</div>
<div class="menu">
<p>Home</p>
<ul>
<li>Blog</li>
<li>Post 1</li>
<li>Post 2</li>
</ul>
<p>Products</p>
<p>About</p>
</div>
</div>