The arrows before the title are displayed using a :before. The problem only occur on Internet Explorer.
// edit : Mistake there, my styling is on p a.
Maybe is it the issue ?
So, here's the code:
.special-title {
font-size: 24px;
color: #a4a19e;
line-height: 1.2;
position: relative;
padding: 8px 0 8px 38px;
border-top: 1px solid #e2dbcf;
border-bottom: 1px solid #e2dbcf;
margin-top: 49px;
margin-bottom: 25px; }
.special-title:before {
content: url('../img/general-title-decoration.svg?1369571463');
position: absolute;
width: 28px;
left: 0;
top: 23px;
margin-top: -13px; }
and for the button:
.btn-call-to-action a {
background: #8e8287;
color: #f5f3e2;
padding: 2px 60px 2px 10px;
height: 35px;
line-height: 40px;
margin-top: 6px;
display: inline-block;
position: relative;
border-radius: 2px;
height: 40px;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.btn-call-to-action a:hover:after {
-webkit-transform: translatex(6px);
-moz-transform: translatex(6px);
-o-transform: translatex(6px);
-ms-transform: translatex(6px);
transform: translatex(6px); }
.btn-call-to-action a:hover {
background: #6f6469;
border-bottom: none; }
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
and here's the live site: http://aurelieremia.be/tfa/
In .special-title:before, since you're using absolute positioning, remove
margin-top:-13px;
and just use
top:10px;
instead. Then, declare a height as well as a width.
see http://jsfiddle.net/6TdB6/
Related
In Chrome, firefox, opera, brave ia ok, in Safari - transition no good.
In Edge, Internet Esplorer - apprearance not work, looks like the checkbox
How to repear safari's transition and apprearance in Edge/IE browsers?
.mytoggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked {
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
.mytoggle:checked:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" style="" />
Styling a checkbox directly is a pain, you could use the checkbox + label hack, in which you link a label to a checkbox, and apply the styles to the label instead of the checkbox itself:
.mytoggle {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
.mytoggle + label {
font-family: arial;
vertical-align: middle;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle + label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked + label {
background-color: #2A3542;
}
input.mytoggle:focus + label {
outline: 0;
}
.mytoggle:checked + label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" id="mycheckbox" />
<label for="mycheckbox" />
input { opacity:0}
input+label {
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input+label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input:checked+label{
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
input:checked+label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" name="abc" id="abc" checked="checked" style="" />
<label for="abc" class="mytoggle"></label>
I just added a label for input checkbox, tested in internet explorer 11. I don't have have safari browser to test it, So you can test and let know, if this answer meets your requirement.
Please try this.
$(document).ready(function(e) {
$(".ra-box").click(function(){
$(this).toggleClass('checked');
});
});
input[type=checkbox] { opacity: 0; }
.ra-box {
display: inline-block;
margin: 0;
padding: 6px;
cursor: pointer;
border-radius: 15px;
overflow: hidden;
background: #2a3542;
width: 70px;
height: 18px;
position: relative;
}
.ra-box:before {
height: 20px;
width: 20px;
background: #41cac0;
color: #41cac0;
content: 'ON';
text-indent: -40px;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50%;
}
.ra-box:after {
height: 20px;
width: 20px;
background: #7f8c9a;
color: #fff;
content: 'OFF';
position: absolute;
top: 5px;
border-radius: 50%;
text-indent: 30px;
left: 85px;
}
/* Check Box Check Change background color */
.ra-box.checked:before { right: 85px; }
.ra-box.checked:after { left: 5px;}
.ra-box.checked { background: #bdc3c7; }
.ra-box,.checked,.ra-box.checked,.ra-box:before,.ra-box:after,.ra-box.checked:before,.ra-box.checked:after {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
<br>
<br>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
I'm still new in coding, so you'll see some unnecessary codes in the css..
My problem is, I want to make the background stays/static when hovered, I believe my hover style is called "slide".. But when I hover on, the background did hover too. So, I need a help on how to make the background static when hovered.
p/s: please remain the margin for avpb :)
CSS:
#avpb {
background: rgba(0, 0, 0, 0.6);
width: 160px;
height: 220px;
border: 1px solid #000000;
padding: 19.5px;
margin-top: -10px;
margin-left: 555px;
position: absolute;
}
#avp {
position: absolute;
width: 160px;
height: 220px;
}
#avp img {
position: absolute;
z-index: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out;
}
#avp:hover > .overlay {
opacity: 1;
width: 160px;
height: 220px
height:auto;
background: rgba(0, 0, 0, 0.6);
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);
}
.button {
width: 160px;
height: 220px;
position: absolute;
}
.button a {
font-family: Lato;
font-size: 10px;
letter-spacing: 1px;
width: 80px;
height: 25px;
line-height: 25px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #000000;
text-align: center;
text-decoration: none;
padding: 5px;
color: #ffffff !important;
display: block;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
.button a:hover {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #4cd1db;
color: #4cd1db !important;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
HTML:
<div id="avpb">
<div id="avp">
<img src="http://www.imvu.com/catalog/web_av_pic.php?u=87116145">
<div class="overlay">
<div class="button">
<br>
<br>
add
<br>
message
</div>
</div>
</div>
</div>
Here's a JSFiddle
You should just let the .button transform then. I added some styles to your css file, hard to explain, just try and compare it with your original code :).
#avpb {
background: rgba(0, 0, 0, 0.6);
width: 160px;
height: 220px;
border: 1px solid #000000;
padding: 19.5px;
margin-top: -10px;
margin-left: 555px;
position: absolute;
}
#avp {
position: absolute;
width: 160px;
height: 220px;
}
#avp img {
position: absolute;
z-index: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.button{
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#avp:hover>.overlay {
opacity: 1;
width: 160px;
height: 220px height:auto;
background: rgba(0, 0, 0, 0.6);
}
#avp:hover>.overlay>.button {
opacity: 1;
width: 160px;
height: 220px height:auto;
-webkit-transform: translate(0px, 10px);
-moz-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
-o-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
.button {
width: 160px;
height: 220px;
position: absolute;
}
.button a {
font-family: Lato;
font-size: 10px;
letter-spacing: 1px;
width: 80px;
height: 25px;
line-height: 25px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #000000;
text-align: center;
text-decoration: none;
padding: 5px;
color: #ffffff !important;
display: block;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
.button a:hover {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #4cd1db;
color: #4cd1db !important;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
<div id="avpb">
<div id="avp">
<img src="http://www.imvu.com/catalog/web_av_pic.php?u=87116145">
<div class="overlay">
<div class="button">
<br>
<br>
add
<br>
message
</div>
</div>
</div>
</div>
You are transforming/translating the div to be 10 pixels down:
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);
Delete these and it should work fine.
I want to make a sliding menu using solely CSS. The menu will reveal a list of items and a close button inside it. I currently have an anchor tag on my homepage that is styled correctly, but it does not do anything when clicked.
HTML:
<body class="homepage body-push">
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Focus</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
</body>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
UPDATE: I finally found a way to get it working.
HTML:
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Menu</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu h1.logo a {
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 40px;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
}
.menu h1.logo a:hover {
color: #f85c37;
}
.menu img.logo {
margin: 20px 0;
max-width: 160px;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
Javascript:
// Menu settings
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
// Scrollable menu on small devices
$(window).bind("load resize", function(){
if($(window).height() < 400){
$(".menu").css("overflow-y","scroll");
}
else {
$(".menu").css("overflow-y","hidden");
}
});
I would recommend reading this: http://www.sitepoint.com/css3-sliding-menu/
If the article is TL;DR then use
/* Revealing 3D Menu CSS */
body
{
font-family: sans-serif;
font-size: 100%;
padding: 0;
margin: 0;
color: #333;
background-color: #221;
}
/* main page */
article
{
position: fixed;
width: 70%;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 30px 15%;
background-color: #fff;
overflow: auto;
z-index: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
article:after
{
position: absolute;
content: ' ';
left: 100%;
top: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
pointer-events: none;
}
/* navigation */
nav
{
position: fixed;
left: -16em;
top: 0;
bottom: 0;
background-color: #654;
border-right: 50px solid #765;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
nav:after
{
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent #765;
}
nav ul
{
width: 14em;
list-style-type: none;
margin: 0;
padding: 1em;
}
nav a:link, nav a:visited
{
display: block;
width: 100%;
font-weight: bold;
line-height: 2.5em;
text-indent: 10px;
text-decoration: none;
color: #ffc;
border-radius: 4px;
outline: 0 none;
}
nav a:hover, nav a:focus
{
color: #fff;
background-color: #543;
text-shadow: 0 0 4px #fff;
box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
/* hovering */
article, article:after, nav, nav *
{
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
nav:hover
{
left: 0;
}
nav:hover ~ article
{
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
}
nav:hover ~ article:after
{
left: 60%;
}
This can be used to create a 3d sliding menu as seen here
i have a code HTML CODE:
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2" tabindex="1">Sign in with
<ul class="dropdown">
<li><i class="icon-twitter icon-large"></i>Twitter</li>
<li><i class="icon-github icon-large"></i>Github</li>
<li><i class="icon-facebook icon-large"></i>Facebook</li>
</ul>
</div>
</div>
AND CSS:
.wrapper-dropdown-2 {
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px 15px;
background: #fff;
border-left: 5px solid orange;
cursor: pointer;
text-align: left;
cursor: pointer;
outline: none;
}
.wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
.dropdown {
display:none;
}
.wrapper-dropdown-2:hover ul.dropdown {
position: absolute;
display:block;
top: 100%;
left: -5px;
right: 0px;
background: white;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
list-style: none;
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
http://jsfiddle.net/pvt3e/
and i try, in hover mouse to: Sign in with open the drop down but its not work !
i cant work with js. Because I have a problem with 1.8.2, but I think we can find a solution with CSS
try this
.wrapper-dropdown-2:hover ul{
display:block;
}
updated jsFiddle File
also remove .dropdown:hover from your style
You are missing to add hover code to see drop down when hover over. add css for hover.
.wrapper-dropdown-2:hover .dropdown
{
display:block;
}
Live Demo
Just Replace Your This CSS
.dropdown:hover {
/* Size & position */
position: absolute;
display:block;
top: 100%;
left: -5px;
right: 0px;
/* Styles */
background: white;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
To My CSS and Get Result
.wrapper-dropdown-2:hover > .dropdown {
position: absolute;
display:block;
left: -45px;
background: white;
top:24px;
}
You will need to initialize your javascript as well as link to jquery. I see you are using a dropdown from Codrops why dont you just download the source?
I put an image on :after, with a translation on :hover. It makes other unrelated elements move on Chrome, with OS X (Firefox: unresponsive, and Safari : doesn't support transition effect)
I tried without transition, works fine.
I have this on several elements, and they all have this same problem as long as transition and :after are involved.
Here's the html:
See the project
and the css:
.btn-call-to-action {
background: #8e8287;
margin-bottom: 15px;
color: #f5f3e2;
padding: 10px 70px 10px 10px;
margin-top: 6px;
line-height: 1;
display: inline-block;
position: relative;
border-bottom: none;
border-radius: 2px;
white-space: nowrap; }
.btn-call-to-action:after {
content: url('../img/general-white-arrow.svg?1370787761');
position: relative;
display: inline-block;
position: absolute;
top: 8px;
width: 35px;
padding-left: 15px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.btn-call-to-action:hover:after {
-webkit-transform: translatex(6px);
-moz-transform: translatex(6px);
-o-transform: translatex(6px);
-ms-transform: translatex(6px);
transform: translatex(6px); }
and the live version here.