I working with sociable on hover background-color slide down from top to bottom I wrote CSS but I don't know why it's not working.
ul.socials {
display: flex;
flex-direction: row;
list-style-type: none;
font-size: 20px;
}
.socials li {
padding: 12px;
}
.socials li.facebook {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li.facebok:hover {
background-position: 0 -100%;
color: #ffffff;
}
i.fa.fa-facebook {
color: #3B5998;
}
i.fa.fa-twitter {
color: #00A0D1;
}
i.fa.fa-dribbble {
color: #ea4c88;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
<ul class="socials">
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="dribbble"><i class="fa fa-dribbble"></i></li>
</ul>
</div>
Here is the working code for your reference. I made sliding effect working for all 3 icons.
ul.socials {
display: flex;
flex-direction: row;
list-style-type: none;
font-size: 20px;
}
.socials li {
padding: 12px;
}
.socials li.facebook {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li.twitter {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #00A0D1 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li.dribbble {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #ea4c88 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li:hover {
background-position: 0 -100%;
color: #ffffff;
}
i.fa.fa-facebook {
color: #3B5998;
}
i.fa.fa-twitter {
color: #00A0D1;
}
i.fa.fa-dribbble {
color: #ea4c88;
}
.socials li:hover a i {
color: #fff;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
<ul class="socials">
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="dribbble"><i class="fa fa-dribbble"></i></li>
</ul>
</div>
A typo mistake : use .socials li.facebook:hover instead of .socials li.facebok:hover
ul.socials {
display: flex;
flex-direction: row;
list-style-type: none;
font-size: 20px;
}
.socials li {
padding: 12px;
}
.socials li.facebook {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
transition: background-position 0.5s;
}
.socials li.facebook:hover {
background-position: 0 -100%;
color: #ffffff;
}
i.fa.fa-facebook {
color: #3B5998;
}
i.fa.fa-twitter {
color: #00A0D1;
}
i.fa.fa-dribbble {
color: #ea4c88;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
<ul class="socials">
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="dribbble"><i class="fa fa-dribbble"></i></li>
</ul>
</div>
Related
This question already has answers here:
How to prevent a CSS keyframe animation from running on page load?
(9 answers)
Closed 1 year ago.
I want to animate the background color and transform of a HTML button. When I use the animation, the starting animation is also shown. The background color of the button is green, when I open the page, the background color is animated from white to green. I don't want this animation, but I still want to keep the animation when the button is hovered on.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;600&display=swap');
:root {
--navbar-text-size: 18px;
--navbar-text-color: hsla(240, 100%, 99%, 1);
--background-color-A: hsla(160, 100%, 75%, 1);
--background-color-B: hsla(203, 92%, 75%, 1);
--navbar-background-color: hsla(0, 0%, 31%, 1);
--navbar-text-color-hover: hsla(195, 100%, 50%, 1);
--navbar-light-font-weight: 300;
--navbar-heavy-font-weight: 600;
--navbar-button-background-color: hsla(157, 100%, 49%, 1);
--navbar-button-background-color-hover: hsla(157, 100%, 49%, 0.8);
}
.body {
margin: 0px;
padding: 0px;
background: var(--background-color-A);
background: -webkit-linear-gradient(to right, var(--background-color-A), var(--background-color-B));
background: linear-gradient(to right, var(--background-color-A), var(--background-color-B));
box-sizing: border-box;
}
.body-header {
display: flex;
padding: 15px 10%;
align-items: center;
justify-content: space-between;
background-color: var(--navbar-background-color);
}
.body-header-h2 {
color: var(--navbar-text-color);
font-size: var(--navbar-text-size);
font-family: "Poppins", sans-serif;
font-weight: var(--navbar-heavy-font-weight);
text-decoration: none;
}
.body-header-nav-ul {
list-style: none;
}
.body-header-a-button {
color: var(--navbar-text-color);
border: none;
cursor: pointer;
padding: 9px 25px;
font-size: var(--navbar-text-size);
font-family: 'Poppins', sans-serif;
font-weight: var(--navbar-heavy-font-weight);
border-radius: 50px;
text-decoration: none;
background-color: var(--navbar-button-background-color);
transition-duration: 0.5s;
transition-property: transform, background-color;
-o-transition-duration: 0.5s;
-o-transition-property: transform, background-color;
-moz-transition-duration: 0.5s;
-moz-transition-property: transform, background-color;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: transform, background-color;
}
.body-header-nav-ul-li {
color: var(--navbar-text-color);
display: inline-block;
padding: 0px 20px;
font-size: var(--navbar-text-size);
font-family: 'Poppins', sans-serif;
font-weight: var(--navbar-light-font-weight);
text-decoration: none;
}
.body-header-nav-ul-li-a {
color: var(--navbar-text-color);
font-size: var(--navbar-text-size);
font-family: 'Poppins', sans-serif;
font-weight: var(--navbar-light-font-weight);
text-decoration: none;
}
.body-header-a-button:hover {
transform: scale(0.95);
background-color: var(--navbar-button-background-color-hover);
/* transition-duration: 0.5s;
transition-property: all;
-o-transition-duration: 0.5s;
-o-transition-property: all;
-moz-transition-duration: 0.5s;
-moz-transition-property: all;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all; */
}
.body-header-nav-ul-li-a:hover {
color: var(--navbar-text-color-hover);
transition-property: color;
transition-duration: 0.5s;
}
<body class="body">
<header class="body-header">
<h2 class="body-header-h2">
Test
</h2>
<nav class="body-header-nav">
<ul class="body-header-nav-ul">
<li class="body-header-nav-ul-li">
<a href="/" class="body-header-nav-ul-li-a">
Test1
</a>
</li>
<li class="body-header-nav-ul-li">
<a href="/about" class="body-header-nav-ul-li-a">
Test2
</a>
</li>
<li class="body-header-nav-ul-li">
<a href="/join" class="body-header-nav-ul-li-a">
Test3
</a>
</li>
<li class="body-header-nav-ul-li">
<a href="/releases" class="body-header-nav-ul-li-a">
Test4
</a>
</li>
</ul>
</nav>
<a href="/login" class="body-header-a">
<button class="body-header-a-button">
Button
</button>
</a>
</header>
</body>
I'm sorry I couldn't really understand what you actually want but if you can keep the transformation property as it is, if that's what you want it to look like when it's hovered on but you can simply change you navbar button color if you don't like the colors
I made this menu before i just started using bootstrap. The menu is generated from the database. The HTML output is shown below.
<ul id="nav">
<li value="1">Home</li>
<li value="2">
Portfolio
<ul class='Subs'>
<li value="5">Web Design</li>
<li value="6">Graphic Design</li>
<li value="7">Logo Design</li>
<li value="8">Blog Design</li>
</ul>
</li>
<li value="3">
Projects
<ul class='Subs'>
<li value="9">Project1</li>
<li value="10">Project2</li>
<li value="11">Project3</li>
<li value="12">Project4</li>
</ul>
</li>
<li value="4">
Contact
<ul class='Subs'>
<li value="13">Support</li>
<li value="14">Quote</li>
<li value="15">General Inquiry</li>
</ul>
</li>
<li value="16">kaas</li>
</ul>
Here is the CSS i use
#nav span {
display: none;
}
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
z-index: 99;
}
#nav {
color-stop(0, #E3E3E3),
color-stop(0.5, white)
background-image: -o-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: -moz-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: -webkit-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: -ms-linear-gradient(bottom, #E3E3E3 0%, white 100%);
background-image: linear-gradient(to bottom, #E3E3E3 0%, white 100%);
border-bottom: 5px solid #333333;
float: left;
margin-left: 1%;
margin-right: 1%;
position: relative;
width: 98%;
}
#nav ul.subs {
color-stop(0, #E3E3E3),
color-stop(0.5, white)
background-color: -o-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: -moz-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: -webkit-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: -ms-linear-gradient(bottom, white 0%, #E3E3E3 100%);
background-image: linear-gradient(to bottom, white 0%, #E3E3E3 100%);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
display: none;
left: 0;
padding: 2%;
position: absolute;
top: 54px;
width: 96%;
}
#nav > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
-moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
#nav li{
display: block;
text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
#nav > li{
color: #333333;
display: block;
font-size: 1.3em;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
}
#nav > li:hover, #nav :hover {
background-color: #F55856;
color: #FFFFFF;
cursor: pointer;
}
#nav li.active > li{
background-color: #333333;
color: #FFFFFF;
}
#nav li:hover ul.subs {
display: block;
}
#nav ul.subs > li {
display: inline-block;
float: none;
padding: 10px 1%;
vertical-align: top;
width: 33%;
}
#nav ul.subs > li{
color: #777777;
line-height: 20px;
}
#nav ul.subs > li{
font-size: 1.3em;
margin-bottom: 10px;
text-transform: uppercase;
}
#nav ul.subs > li{
float: none;
padding-left: 8px;
font-size: 0.8em;
margin: 0px;
padding: 5px;
-moz-transition: padding 150ms ease-out 0s;
-ms-transition: padding 150ms ease-out 0s;
-o-transition: padding 150ms ease-out 0s;
-webkit-transition: padding 150ms ease-out 0s;
transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
padding-left: 15px;
}
#nav ul.subs > li:hover{
color: red;
cursor: pointer;
}
Without bootstrap it looks fabulous, so could anybody explain to me how this is happening and this can be fixed?
Thanks in advance
You put an uppercase letter at the beginning of the class Subs when it should actually be subs, which, if you check your CSS is a correct match.
DEMO JSFiddle
i'm having some trouble with animating a dropdown menu using css3. I need it to work with css3 and not jQuery or javascript. I've added all the rules neccessary but still the effect doesn't happen. Can anyone please help? Here is a fiddle of my code. Thank you.
http://jsfiddle.net/Zmr7u/6/
html code:
<header class="main-header">
<nav class="main-nav">
<ul class="top-nav">
<li>
home
<ul class="drop-down">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
about
<ul class="drop-down">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
products
<ul class="drop-down">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
contacts
<ul class="drop-down">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</nav>
</header>
css code:
nav.main-nav {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
width: 100%;
}
.top-nav {
border-bottom: 2px solid #111;
height: 30px;
list-style-type: none;
margin: 0;
padding-left: 0;
width: 100%;
}
.top-nav li {
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f));
background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f);
background-image: linear-gradient(top, #2f2f2f, #4f4f4f);
border-bottom: 2px solid #111;
border-right: 1px solid #555;
float: left;
font-size: 14px;
height: 20px;
padding-top: 10px;
position: relative;
text-align: center;
width: 150px;
}
.top-nav li ul.drop-down {
position: absolute;
top: 32px;
left: 0;
visibility: hidden;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.top-nav li:hover ul.drop-down {
visibility: visible;
opacity: 1;
display: block;
}
.top-nav li .drop-down li {
height: 20px;
-webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.top-nav li .drop-down li:hover {
height: 30px;
}
.top-nav li a {
color: #aaa;
padding-top: 5px;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 25px;
text-decoration: none;
}
You can just use visibility without using display:
.top-nav li ul.drop-down {
list-style-type: none;
position: absolute;
top: 32px;
left: -40px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.top-nav li:hover ul.drop-down {
visibility: visible;
opacity: 1;
}
Demo.
You can use css animation when you want to increase opacity and make the element visible, like --
span {
display: none;
opacity: 0;
}
To make span visible
span {
display: block;
animation: visible 2s;
}
#keyframes visible {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
And if you're getting a bug when make animation less than 1s then use animation: visible 0.5s forwards;
I've tried suggestions from other answers like, white-space: wrapnow;, nothing's worked so far. My question is, how do I stop the wrapping of text in HTML?
The text on the navbar moves out of position as I minimize my browser, how do I stop this om happening?
Here's a pic of the problem...
My CSS
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
white-space: nowrap;
}
.menu {
margin-top: -8px;
height: 50px;
width: 100%;
position: absolute; right: 0; left: 0;
text-align: left;
background: rgb(63,76,107); /* Old browsers */
background: -moz-linear-gradient(top, rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,76,107,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 1px 3px #000000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a { /* Navigation Bar text */
display: block;
padding: 0 20px;
margin: 15px 0;
line-height: 15px;
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
/* text-shadow: 1px 1px 1px rgba(255,255,255,0.3); */
-webkit-transition: color .4s ease-in-out;
-moz-transition: color .4s ease-in-out;
-o-transition: color .4s ease-in-out;
-ms-transition: color .4s ease-in-out;
transition: color .4s ease-in-out;
}
.menu li:first-child a{ border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { text-decoration: underline; }
.menu li#navbar-logo:hover > a { text-decoration: none; }
.menu ul {
position: absolute;
top: 35px;
left: 0;
opacity: 0;
background: rgba(63,76,107,1);
border-left: 1px solid #393942;
border-bottom: 1px solid #393942;
border-right: 1px solid #393942;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-transition: opacity .75s ease .1s;
-moz-transition: opacity .75s ease .1s;
-o-transition: opacity .75s ease .1s;
-ms-transition: opacity .75s ease .1s;
transition: opacity .75s ease .1s;
}
.menu li:hover > ul {
opacity: 1;
}
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 35px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 10px 0 10px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
border: none;
}
.menu li#navbar-logo,
.menu li#navbar-about,
.menu li#navbar-shop,
.menu li#navbar-contact,
.menu li#navbar-community {
margin-top: 5px;
}
.menu li#navbar-logo {
margin-top: 3px;
}
.menu li#navbar-logo,
.menu li#navbar-about,
.menu li#navbar-shop,
.menu li#navbar-contact,
.menu li#navbar-community {
margin-left: -13px;
margin-right: 5px;
}
.menu li#navbar-about,
.menu li#navbar-shop,
.menu li#navbar-contact,
.menu li#navbar-community {
margin-left: 5px;
margin-right: 5px;
}
#navbar-logo a{
color: #FFC8C8;
text-shadow: 2px 2px 2px rgba(255, 0, 0, 1);
font-size: 50px;
font-family: Intrique Script Personal Use;
}
The HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of Webpage</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<nav class="navbar">
<ul class="menu">
<li id="navbar-logo">Arc Studios</li>
<li id="navbar-about">About Us
<ul>
<li>FAQ's</li>
<li>Our Inception</li>
<li>Locations</li>
</ul>
</li>
<li id="navbar-shop">Store
<ul>
<li>Games</li>
<li>OS's</li>
<li>Other</li>
</ul>
</li>
<li id="navbar-contact">Contact
<ul>
<li>Email</li>
<li>Help Centre</li>
</ul>
</li>
<li id="navbar-community">Community
<ul>
<li>Forums</li>
<li>Events</li>
</ul>
</li>
</ul>
</nav>
</header>
<br></br>
<footer class="footer">
<p><small>© Copyright Arc Innovations 2013, All rights reserved</small></p>
</footer>
</body>
</html>
Maybe try something like this?
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
white-space: nowrap;
overflow: hidden;
}
It would be easier to debug with a http://www.jsfiddle.net example.
I believe white-space: nowrap; should work.
I have applied certain animations for drop down menu.. It works fine in Chrome but not in FF n IE.. Will u please let me know where I am going wrong..
Here is the JS fiddle what I am upto now:
Demo
here is the HTML part..
<div id="back">
<div class="wrapper">
<div class="container">
<ul id="menu" class="menu">
<li id="l1" runat="server" class="active"><a class="link1" href="Home.aspx" runat="server" id="a1">Home</a></li>
<li id="l2" runat="server"><a runat="server" class="link1" href="?id=History" id="a2">About MCB<img src="Images/Other%20Images/dropdown.png" style="position:absolute;margin-right:0px; top: -3px; left: 138px;"/></a>
<ul>
<li id="l21" runat="server"><a runat="server" class="link1" href="?id=Members" id="a21">Member details</a></li>
<li id="l22" runat="server"><a runat="server" class="link1" style="width:116px;" href="?id=History" id="a22">History</a></li>
</ul>
</li>
<li id="l3" runat="server"><a runat="server" href="?id=Photos" class="link1" id="a3">Gallery<img src="Images/Other%20Images/dropdown.png" style="position:absolute;top: -3px; float:right;right:-8px; z-index:1000;"/></a>
<ul id="gl">
<li id="L31" runat="server"><a style="width:inherit" runat="server" class="link1" href="?id=Photos" id="a15">Photos</a></li>
<li id="L32" runat="server"><a style="width:inherit" runat="server" class="link1" href="?id=Videos" id="a16">Videos</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
and here is the Css:
.wrapper {
width: 100%;
height: 40px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px ridge #939393;
position: relative;
top:19px;
margin-bottom: 30px;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 30px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
position:relative;
}
ul.menu li {
list-style: none;
float:left;
height: 39px;
display:inline-block;
text-align: center;
position:relative;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul.menu li ul li
{
display: block;
float: none;
clear: left;
}
.menu li:not(:hover) ul {
display: none;
}
#-webkit-keyframes fadeInOut{
from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
#-moz-keyframes fadeInOut {
from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
#-o-keyframes fadeInOut {
from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
#keyframes fadeInOut {
from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
.menu li:hover ul {
display: inline-block;
-webkit-animation: fadeInOut 1s;
-moz-animation: fadeInOut 1s;
-o-animation: fadeInOut 1s;
animation: fadeInOut 1s;
}
ul.menu li ul li a
{
clear: left;
line-break: strict;
display:inline-block;
position:relative;
font-size:18px;
}
.link1 {
display: block;
text-decoration: none;
font-family:'Adobe Garamond Pro';
color: White;
font-size: 22px;
font-weight:bolder;
padding: 0 30px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 39px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-moz-transition-property: background;
transition-property:background;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.link1:hover {
background: transparent none;
}
ul li.active .link1{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
color:black;
background:-o-linear-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
background:linear-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
Please let me know where I am going wrong...
#-moz-keyframes fadeInOut { from {
-webkit-transform: rotate(0deg);
font-size:0px;
}
to {
-webkit-transform: rotate(1440deg);
font-size:15px;
}
}
You should replace those -webkit- with -moz-.