So, I am attempting to make a pretty dope navigation menu bar animation/transition for my website to create a slick looking effect. My goal here is to use only CSS, and not add in any javascript that just complicate things. This link has the kind of animation I'm looking for. Just to give you guys an idea. (Just browsing through W3 Schools to see what animation I'm looking for).
The idea here is to change topnav's background-color from page to page in as a smooth transition.
Here is what I currently have for my CSS styling. I am liking my current styling, but I just want to add in the transition from page to page for the background-color to act like a slider in a sort of way
ul.topnav li a:hover:not(.active) {
background-color: #4d4dff;
transition: 0.5s;
}
ul.topnav li a.active {
background-color: #00cc99;
color: black;
/* I would like to add in some sort of animations / transition here. */
}
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li>Home
<!--Background when active-->
<li>About</li>
<li>Portfolio</li>
<!--If I click on this page, it would transition the background COLOR to this page-->
<li>Gallery</li>
<li>Contact Me</li>
</div>
</ul>
EDIT COMMENT FOR RESPONSE TO Muljayan
Take a look at this example here https://youtu.be/oCUCWnbre0k?t=1014 and follow this code.
HTML
* {
margin: 0;
padding: 0;
}
.navigation {
margin: 200px 20px;
background: #383838;
color: #FFF;
overflow: hidden;
height: 50px;
width: 1000px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.navigation li {
width: 100px;
border-bottom: 1px solid #666;
border-right: 2px ridge #585858;
float: left;
list-style-type: none;
font-family: 'ambleregular';
font-weight: normal;
font-size: 15px;
line-height: 28px;
padding: 10px 10px 10px 10px;
-webkit-transition: all .9s;
-moz-transition: all .9s;
-o-transition: all .9s;
-ms-transition: all .9s;
transition: all .9s;
}
.navigation li:hover {
background: #FE980F;
border-bottom: 1px solid #FFF;
}
.navigation li a {
text-decoration: none;
color: #FFF;
}
.navigation li a:hover {
color: #333;
}
/* Search box */
.search_box {
float: right;
border: 1px solid #3C3C3C;
background: #FFF;
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
-o-border-radius: 0.3em;
position: absolute;
margin-top: 8px;
margin-right: 15px;
width: 228px;
left: 765px;
top: 204px;
}
.search_box form input[type="text"] {
border: none;
outline: none;
background: none;
font-size: 12px;
color: #acacac;
width: 75%;
padding: 5px;
}
/* Final STEP */
.search_box form input[type="submit"] {
border: none;
cursor: pointer;
background: url(images/search.png) no-repeat 0px 7px;
position: absolute;
right: 0;
width: 20px;
height: 25px;
}
<body bgcolor="#faf7fd">
<ul class="navigation">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="search_box">
<form>
<input type="text" value="Search" onfocus="this.value = ''; {this.value='Search' ;}">
<input type="submit " value=" ">
</form>
</div>
</body>
I used transitions on the li and an animation on the a tags to achieve the effects you needed. on each page without javascript you will have to change the classes out for the active page manually.
Example: On the about page the about a tag would have the class lnk and all the other a tags would have aLnk this is to highlight the current page.
.menu {
display: flex;
align-items: center;
width: 100%;
background-color: #333333;
height: 50px;
float: left;
}
ul {
width: 100%;
float: left;
color: #ffffff;
}
li {
width: 100px;
height: 34px;
float: left;
list-style: none;
background-color: transparent;
transition: ease-in-out .9s;
text-align: center;
padding-top: 10px;
}
li:hover {
background-color: orange;
transition: ease-in-out .9s;
}
.aLnk {
width: 100%;
height: 100%;
float: left;
text-decoration: none;
color: #ffffff;
transition: ease-in-out .9s;
}
.aLnk:hover {
color: yellow;
transition: ease-in-out .9s;
animation-name: changeColor;
animation-duration: .9s;
animation-iteration-count: infinate;
}
#keyframes changeColor {
10% {
color: #000000;
}
100% {
color: yellow;
}
}
.active {
background-color: orange;
}
.lnk {
color: yellow;
text-decoration: none;
}
.lnk:hover {
color: yellow;
}
<div class="menu">
<ul class="topnav">
<li class="active"><a class="lnk" href="index.html">Home</a></li>
<li><a class="aLnk" href="about.html">About</a></li>
<li><a class="aLnk" href="portfolio.html">Portfolio</a></li>
</ul>
</div>
I think this is not possible to do this with pure CSS. The reason for this being whenever you click on a link it loads a new page. To create the effect you desire it is necessary to keep in memory the previous background colour to cause the transition.
For example, if the final colours of the backgrounds are as follows
home page => blue
about page => red
portfolio page => green
If you go from home page to the about page the transition should be blue to red but let's say you're going from the portfolio page to the about page the transition should be green to red.
With pure CSS there is no way of knowing if the previous page had blue or green to transition into the red in the about page.
I would suggest you learn some front end framework like React, Vue or Angular. With those,
* {
margin: 0;
padding: 0;
}
.navigation {
margin: 200px 20px;
background: #383838;
color: #FFF;
overflow: hidden;
height: 50px;
width: 1000px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.navigation li {
width: 100px;
border-bottom: 1px solid #666;
border-right: 2px ridge #585858;
float: left;
list-style-type: none;
font-family: 'ambleregular';
font-weight: normal;
font-size: 15px;
line-height: 28px;
padding: 10px 10px 10px 10px;
-webkit-transition: all .9s;
-moz-transition: all .9s;
-o-transition: all .9s;
-ms-transition: all .9s;
transition: all .9s;
}
.navigation .active {
background: #FE980F;
border-bottom: 1px solid #FFF;
animation: animatedNav 1s;
animation-timing-function: ease-in;
}
#keyframes animatedNav {
0% {background: #383838;}
100% {background: #FE980F;}
}
.navigation li a {
text-decoration: none;
color: #FFF;
}
.navigation .active a {
color: #333;
}
<!-- home.html -->
<body bgcolor="#faf7fd">
<ul class="navigation">
<li class="active">Home</li>
<li>Products</li>
</ul>
</body>
<!-- products.html -->
<body bgcolor="#faf7fd">
<ul class="navigation">
<li>Home</li>
<li class="active">Products</li>
</ul>
</body>
you can create pretty impressive page transitions.
On a side note check the code below and see if this is the effect you desire.
The issue with this would be that the previously visited link will not have a transition
Related
Why I can't show the icon next to text? I've tried so many methods and still doesn't work.
This is my code and please check it. Thanks
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
background-color: #444444;
}
li a {
float: left;
display: block;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
border-right: 1px solid greenyellow;
min-width: 80px;
}
li a:hover {
background-color: #222222;
color: #FFE400;
animation: myGlowAnimation;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes myGlowAnimation {
80% {
text-shadow: 0px 0px 10px #FF7F50;
}
}
li a:focus {
color: orange;
}
body {
background-image: url('https://i.pinimg.com/originals/62/24/7f/62247f857425ed3f71abfaffd77605af.jpg');
width: 1900px;
height: 200px;
}
<body>
<ul>
<li><a href="">
<img src="https://pbs.twimg.com/media/DTtEP7lX0AAyK3N.jpg" style="height:40px; width:auto;border-radius:50%;">Home</a>
</li>
<li>About</li>
<li>Services</li>
<li>Contact us</li>
<li>Entertain</li>
</ul>
</body>
.................................................................................................................................................................................................................................................................................................................
There are two things you can do here:
Use display:inline on your li element/ icon etc.
Float your icon to left.
In following snippet i floated img(in your case icon) to left. And adjusted it using negative margin. Float CSS property places an element on the left or right side of its container, The element is removed from the normal flow of the page, though still remaining a part of the flowallowing text and inline elements to wrap around it.
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
background-color: #444444;
}
li a {
float: left;
display: block;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
border-right: 1px solid greenyellow;
min-width: 80px;
}
li a img{
float:left;
margin-top:-8px;
margin-left:-20px;
}
li a:hover {
background-color: #222222;
color: #FFE400;
animation: myGlowAnimation;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes myGlowAnimation {
80% {
text-shadow: 0px 0px 10px #FF7F50;
}
}
li a:focus {
color: orange;
}
body {
background-image: url('https://i.pinimg.com/originals/62/24/7f/62247f857425ed3f71abfaffd77605af.jpg');
width: 1900px;
height: 200px;
}
<body>
<ul>
<li><a href="">
<img src="https://pbs.twimg.com/media/DTtEP7lX0AAyK3N.jpg" style="height:40px; width:auto;border-radius:50%;">Home</a>
</li>
<li>About</li>
<li>Services</li>
<li>Contact us</li>
<li>Entertain</li>
</ul>
</body>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am trying add notification icon, but is overflow text and dont on left.
Here is my code (run the snippet to see the result):
.dropdown {
display: inline-block;
cursor: pointer;
border: 1px solid #fff;
}
.dropdown:hover {
color: #e1a900;
}
.dropdown-content {
background-color: #333333;
display: none;
position: relative;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 64px;
}
.dropdown-content a {
color: #fff;
font-weight: bold;
padding: 12px 12px;
text-decoration: none;
display: block;
-o-transition:color .2s ease-out, background .3s ease-in;
-ms-transition:color .2s ease-out, background .3s ease-in;
-moz-transition:color .2s ease-out, background .3s ease-in;
-webkit-transition:color .2s ease-out, background .3s ease-in;
transition:color .2s ease-out, background .3s ease-in;
}
.dropdown-content a:hover {background-color: #cc9900;}
.dropdown:hover .dropdown-content {display: block;}
.bellimg {
padding-top: 5px;
}
.bellnumbers {
font-size:12px;
background-color:red;
width:16px;
line-height: 16px;
text-align: center;
color:#fff;
z-index: 2;
border-radius: 3px;
position: absolute;
left: 30px;
}
.bell {
border: 1px solid #fff;
width: 48px;
height: 42px;
left: 30;
position: absolute;
}
.notificationicon {
position: absolute;
top: 0px;
right: 0px;
border: 1px solid #fff;
}
/********************************
* Menu Styles *
*********************************/
#menu {
height: 64px;
width: 450px;
}
#menu ul,#menu li {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu li a {
color: #fff;
font-weight: bold;
-o-transition: color .2s ease-out, background .3s ease-in;
-ms-transition: color .2s ease-out, background .3s ease-in;
-moz-transition: color .2s ease-out, background .3s ease-in;
-webkit-transition: color .2s ease-out, background .3s ease-in;
transition: color .2s ease-out, background .3s ease-in;
}
#menu a {
display: block;
line-height: 35px;
padding: 14px 10px 14px 5px;
text-decoration: none;
color: #fff;
border-bottom: 1px solid #000;
}
#menu li:hover > a,#menu li a:hover {
color: #fff;
background-color: #e1a900;
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer;
}
#menu label {
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center;
}
#menu label span {
font-size: 13px;
position: absolute;
left: 35px;
}
#menu ul.menus {
/*background sub menus*/
height: auto;
overflow: hidden;
width: 180px;
background-color: #333333;
position: absolute;
z-index: 99;
display: none;
border: 1px solid #000;
border-top: none;
color: #fff;
}
#menu ul.menus a {
color: #fff;
padding: 0px;
}
#menu ul.menus li {
display: block;
width: 100%;
text-transform: none;
}
#menu li:hover ul.menus {
display: block;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
#menu a.prett {
padding: 14px 19px 14px 5px;
}
#menu li:hover > a.prett,#menu a.prett:hover {
/*DropDown list background color*/
background: #e1a900;
color: #fff;
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 30px;
right: 4px;
}
#menu ul.menus a:hover {
/*Dropdown menu background color*/
background: #e1a900;
}
#media screen and (max-width: 1000px){
#menu {width: 150px;}
#menu a {padding: 0px; border-bottom: 1px solid #000;}
#menu a.prett {padding: 0px;}
#menu a.prett::after {top: 15px;right: 4px;}
#menu{position:relative;margin-top:0;}
#menu ul{background-color: #333333;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none; border-top: 2px solid red; border-bottom: 2px solid red;}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#e1a900;color:#fff;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background-color: #4d4d4d;}
#menu ul.menus a:hover{background:#e1a900;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block;margin-top: 15px;}
#menu input{z-index:4}
#menu input:checked + label{color:#e1a900; background-color: #404040;}
#menu input:checked ~ ul{display:block;}
}
.menu_head {
width: 100%;
height: 64px;
background-color: #000;
background-image: url("../images/menu.png");
box-shadow: 0 3px 6px rgba(0,0,0, .8);
background-position: top;
text-align: center;
padding-left: 10px;
padding-right: 10px;
position: fixed;
top: 0;
color: #fff;
z-index:1;
font-weight: bold;
border: 1px solid #fff;
}
<div class='menu_head'>
<!-- MENU LEFT -->
<nav id='menu' style='border: 1px solid #fff;'>
<input type='checkbox'/>
<label>≡<span>MENU</span></label>
<ul>
<li><a href=''>Home</a></li>
<li><a class='prett' href='' onclick='return false;'>Rules</a>
<ul class='menus'>
<li><a href='#'>Rules </a></li>
</ul>
</li>
<li><a class='prett' href='' onclick='return false;'>Suporte</a>
<ul class='menus'>
<li><a href='#'>Terms of Service</a></li>
</ul>
</li>
</ul>
</nav>
<div class='notificationicon'>
<span class='bell'>
<img class='bellimg' src='../images/notification.png'/>
<span class='bellnumbers'>10</span>
</span>
<span class='dropdown'>
<div style='float: right; line-height: 64px; margin-right:15px;'>Welcome asd asd asd asd x3G</div>
<div class='dropdown-content'>
<a href=''>PROFILE</a>
<a href=''>TEAM</a>
<a href=''> SETINGS</a>
<a href=''>BALANCE</a>
<a href=''> INBOX</a>
<a href=''> LOG OUT</a>
</div>
</span>
<div style='clear:both;'></div>
</div>
<div style='clear:both;'></div>
</div>
On the .bell class you have defined the left property value without a unit, for example px (See image below for reference)
Simply add a unit like px or % and it should work:
.bell {
left: 30px;
}
You know how Twitter's menu does a slide in from the BOTTOM of their bottom-border? I'm trying to do the same with transitions on css3 and my border-bottom slides in from the top to bottom AT the bottom when I want it go slide from the bottom to the top AT the bottom like Twitter's menu.
Here's my fiddle: http://jsfiddle.net/8emkgzyb/
ul {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
padding: 0px;
display:inline;
}
ul li a {
text-decoration: none;
font-size: 25px;
padding: 4px;
display:inline;
color: #000;
transition: all .3s;
line-height: 20px;
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 0px;
}
ul li a:hover {
transition: all .3s;
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 4px;
}
html, body {
margin: 0;
padding: 0;
}
and HTML
<ul>
<li>Home</li>
<li>About</li>
<li>Locations</li>
</ul>
something like that?
I don't know if I understood it correct.
JSFIDDLE
ul li a {
height: 24px;
text-decoration: none;
font-size: 25px;
padding: 4px;
color: #000;
transition: all .3s;
line-height: 20px;
border: 0px solid red;
display: block;
}
ul li a:hover {
transition: all .3s;
height: 20px;
border-bottom: 4px solid red;
}
I want to have a border (looks like underline) that moves up on hover.
So if this is a link:
LINK
Then if I hover on it
LINK
""""
Example from the website:
http://matthias-schoenaerts.com/
(navigation bar)
I want it as simple as possible.
This is what I came up with:
http://jsfiddle.net/Lxxqz3pL/
HTML:
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
CSS:
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}
#nav li a:hover {
transition: border .5s ease-in;
background-color: #fff;
border-bottom: 3px solid red;
}
/* End navigation bar styling. */
Here is updated CSS, does it what you trying to get?
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}
#nav li a:after{
display:block;
width:100%;
height:0px;
content:" ";
border:1px solid red;
position: relative;
top:10px;
}
#nav li a:hover:after{
transition: 0.5s ease-in;
transform: translate(0px, -10px);
}
/* End navigation bar styling. */
I've modified your code in areas to get the desired effect
DEMO http://jsfiddle.net/Lxxqz3pL/3/
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
padding: 22px 0 35px;
color: #a3a3a3;
border-bottom: 3px solid #6a901b;
transition: all 0.5s ease;
}
#nav li a:hover {
transition: all 0.5s ease;
color: #fff;
padding-bottom: 5px;
}
How about something like this? FIDDLE.
Just keep the background fixed, add a border at the bottom, and make the height of the anchor smaller.
Relevant CSS
#nav li {
float: left;
height: 40px;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
height: 20px;
transition: height 0.5s;
}
#nav li a:hover {
height: 10px;
border-bottom: 3px solid red;
}
It looks like the example site uses flexNav, a jQuery plugin.
http://jasonweaver.name/lab/flexiblenavigation/
Here's a quick-fix solution. I added a transition to <li> padding to compensate for the added border.
http://jsfiddle.net/Lxxqz3pL/1/
I created a CSS menu with dropdown and I hide the sub menu and display it when you hover over the menu item and I was wondering if it is possible with CSS with some type of CSS transition to make it instead slide down. You cake take a look at a mock up of the menu here.
#main-nav {
position: relative;
}
#main-nav>ul>li {
width: 12.5%;
float: left;
text-align: center;
line-height: .9em;
font-weight: bold;
background: #ccc;
}
#main-nav>ul>li>a {
display: block;
color: #333;
line-height: 12px;
font-size: 14px;
padding: 22px 0;
text-decoration: none;
}
.nav-dropdown {
margin: -5px auto;
position: absolute;
left: -999em;
/* Hides the drop down */
text-align: left;
padding: 0;
border-top: 0;
width: 500px;
background: #333;
color: #f2f2f2;
border-bottom: 10px solid #25272a;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#main-nav li:hover .nav-dropdown {
left: 0;
top: auto;
z-index: 11;
}
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<!-- Start Blog Drop Down-->
<div class="nav-dropdown">
<p>have this item slide down from CSS</p>
</div>
<!-- /.nav-dropdown -->
</li>
</ul>
</div>
Yes you can, but you need to use the max-height property as described here or you can just use a fixed height as described in the previous answer.
CSS
.nav-dropdown {
margin: 0 auto;
height: 0; /* Hides the drop down */
overflow: hidden;
text-align:left;
padding: 0;
border-top: 0;
width: 500px;
background:#333;
color: #f2f2f2;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom: 0;
max-height:0px;
}
#main-nav li:hover .nav-dropdown {
height:auto;
z-index: 11;
max-height:200px;
transition-property: all;
transition-duration: 1s;
border-bottom: 10px solid #25272a;
}
http://jsfiddle.net/L8WVP/7/
This might also be of your interest.
That should help you. Just give the div tag which should slide in the hight 0 at first and make the css transition.
-webkit-transition: height 0.5s ease-in;
-moz-transition: height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
-ms-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;
Then you add at the hover section the hight of the div.
#main-nav li:hover .nav-dropdown {
left: 0;
top: auto;
z-index: 11;
height:200px;
}
And you are done.
Hope I helped you.
http://jsfiddle.net/L8WVP/6/
<ul class="navigation">
<li>Home</li>
<li class="menu">
Services
<ul class="submenu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li a {
text-decoration: none;
color: #e74c3c;
font-family: Tahoma, Arial;
}
.navigation {
background-color: a#e74c3c;
width: 75%;
margin: 20px auto;
min-height: 50px;
}
.navigation > li {
float: left;
padding: 0 20px;
}
.navigation > li > a {
line-height: 50px;
color: #FFF;
}
.navigation .menu {
position: relative
}
.navigation .menu .submenu {
position: absolute;
width: 200px;
-webkit-box-shadow: 0px 1px 1px #CCC;
box-shadow: 0px 1px 1px #CCC;
display: none;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.navigation .menu:hover .submenu {
display: block
}
.navigation .menu .submenu:before {
content: "";
position: absolute;
display: block;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #FFF transparent;
top: -6px;
left: 5px
}
.navigation .menu .submenu li {
padding: 5px 10px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.navigation .menu .submenu li:hover {
background-color: #e74c3c;
}
.navigation .menu .submenu li:hover a {
color: #FFF;
padding: 0 11px;
}