targeting 2 divs on one hover - html

I want to target properties of two divs through css when :hover over one div.
#down-icn {
position: absolute;
bottom: 0; right: 25px;
color: #fff;
-webkit-transition: color 0.25s ease; border-color 0.5s ease;
-moz-transition: color 0.25s ease; border-color 0.5s ease;
-ms-transition: color 0.25s ease; border-color 0.5s ease;
-o-transition: color 0.25s ease; border-color 0.5s ease;
transition: color 0.25s ease; border-color 0.5s ease;
}
#down-icn:hover {
color: #ef5c30;
border-color: #ef5c30;
}
.icn {
border: 2px solid #fff;
border-radius: 50%;
padding: 10px;
margin-left: 10px;
}
!!! .icn:hover {
border: 2px solid #000;
color: #000;
}
when hovered on #down-icn I want to change the properties of both #down-icn and .icn.
EDIT - html
<a href="#footer-anchor">
<div id="down-icn" data-0="opacity: 1; bottom: 25px;" data-550="opacity: 0; bottom: 100px;">more<i class="icn fa fa-chevron-down fa-2x"></i></div>
</a>


Why don't you just use your anchor for hover selection?
a:hover > #down-icn{
color: #ef5c30;
border-color: #ef5c30;
}
a:hover > .icn {
border: 2px solid #000;
color: #000;
}
OR
#down-icn:hover{
color: #ef5c30;
border-color: #ef5c30;
}
#down-icn:hover > .icn {
border: 2px solid #000;
color: #000;
}

Related

Why am I not able to add submenus to this CSS HTML code?

In it I just added a submenu using but it seems the CSS code did not allow this and I got nothing. I am getting this code from a template I found online.
http://way2themes.com/blogger-templates/spraymag.zip
There are more templates like this. So I am facing a common problem in them all. How do i isolate the code that allows me to add sub menus, sub sub menus?
This is the CSS that I am working on.
#header .menu ul li {
float: left;
display: inline-block;
height: 40px;
border-right: solid 1px rgba(255,255,255,0.05);
border-top: none;
}
#header .menu ul li a{
padding: 0 12px 0 12px;
display: block;
border: none !important;
text-decoration: none;
line-height: inherit;
border-bottom: solid 1px transparent;
color: #999;
}
#header .menu ul li a:hover {
background: rgba(255,255,200,0.1); color: #FFF; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.1);
}
#main-menu ul li:first-child {
margin-left: 10px;
}
.main-navigation-wrapper {
display: block; margin-bottom: 30px;
position: relative; margin-left: auto; margin-right: auto;
}
ul#main-nav {
display: block; background: #363D40; border-top: solid 5px #666; border-top-color: rgba(255,255,255,0.15); padding-right: 40px; min-height: 40px; margin-bottom: 0 !important; box-shadow: inset 0 -20px 0 rgba(0,0,0,0.09); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
zoom: 1;
}
#main-nav > li {
float: left; display: inline-block; position: relative; border-top: solid 5px transparent;
margin-top: -5px;
line-height: 21px;
}
#main-nav > li > a:hover {
border-color: transparent;
background-color: #444;
background-color: rgba(255,255,255,0.1);
color: #FFF;
}
#main-nav > li > a {
display: block;
letter-spacing: 1px;
padding: 10px 20px;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
border-right: solid 1px rgba(255,255,255,0.07);
color: #FFF;
color: rgba(255,255,255,0.7);
position: relative;
z-index: 99997;
box-shadow: inset 0px -19px 0px rgba(0,0,0,0);
text-decoration: none;
line-height: 21px;
-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
-moz-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
-o-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
-ms-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
}
.responsive-nav-wrapper {
position: relative;
display: block;
display: none;
z-index: 9999;
}
#responsive-nav , .responsive-nav-wrapper #resp-menu {
background: #363D40;
}
#responsive-nav {
border-top: none;
position: relative;
cursor: pointer;
padding-right: 20px;
z-index: 99999999999999;
}
#responsive-nav:hover, .responsive-nav-wrapper.responsive-active #responsive-nav {
background: #498AB8;
}
#responsive-nav:hover .nav-icon, .responsive-nav-wrapper.responsive-active #responsive-nav .nav-icon, #responsive-top-nav .nav-icon:hover, .responsive-top-nav-wrapper.responsive-active #responsive-top-nav .nav-icon {
border-top-color: #FFF;
border-bottom-color: #FFF;
}
#responsive-nav:hover .text-nav, .responsive-nav-wrapper.responsive-active .text-nav {
color: #FFF;
}
.responsive-nav-wrapper.responsive-active #resp-menu {
display: block;
z-index: 9999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#responsive-nav {
display: block;
background: #363D40;
border-top: solid 5px #666;
border-top-color: rgba(255,255,255,0.15);
padding-right: 40px;
min-height: 40px;
margin-bottom: 0 !important;
box-shadow: inset 0 -20px 0 rgba(0,0,0,0.09);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.responsive-top-nav-wrapper {
width: auto;
display: none;
z-index: 9999;
height: 40px;
}
#responsive-top-nav {
border-top: none;
position: relative;
padding-right: 60px;
height: 40px;
z-index: 9999;
}
#responsive-top-nav .nav-icon {
margin-top: 11px;
cursor: pointer;
}
.responsive-top-nav-wrapper #top-resp-menu {
display: none;
position: absolute;
top: 40px;
left: 15px;
width: auto;
background-color: #fff;
background-color: rgba(255,255,255,0.98);
border: solid 1px #e7e7e7;
}
#top-resp-menu #top-menu-ul, #top-resp-menu ul {
margin-bottom: 0px;
}
#top-resp-menu li a {
display: block;
width: 100%;
color: #888;
text-transform: uppercase;
font-weight: bold;
font-size: 13px;
padding: 8px 70px 8px 15px;
border-bottom: solid 1px #e9e9e9;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.text-nav {
float: left;
padding-left: 20px;
line-height: 40px;
text-transform: uppercase;
font-size: 13px;
color: #eee;
color: rgba(255,255,255,0.7);
font-weight: bold;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#responsive-nav .nav-icon, #responsive-top-nav .nav-icon {
margin-top: 12px;
display: block;
border-bottom: 10px double #aaa;
border-top: 3px solid #aaa;
height: 4px;
width: 25px;
float: right;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
border-top-color: rgba(255,255,255,0.7);
border-bottom-color: rgba(255,255,255,0.7);
}
.responsive-nav-wrapper #resp-menu {
display: none;
position: absolute;
top: 44px;
width: 100%;
background-color: #363D40;
}
#resp-menu li, #top-resp-menu li {
display: block;
float: none;
}
#resp-menu ul, #top-resp-menu ul, #top-resp-menu ul li, #resp-menu li {
width: 100% !important;
}
#resp-menu li a {
display: block;
color: #FFF;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
font-weight: bold;
font-size: 13px;
padding: 8px 20px 8px 15px;
border-bottom: solid 1px #444;
border-left: solid 5px #444;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.responsive-top-nav-wrapper {
display: none;
and this is the HTML.
Please have a look and help me.
<div class='inner-wrap'>
<nav class='menu-main-navigation-container'>
<ul id='main-nav'>
<!-- Main Menu -->
<li><a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Lifestyle</a></li>
<li><a href='#'>Travel</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
</li>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Sample Page</a></li>
<li><a href='#'>Contact</a></li>
<div style='clear:both'/>
</ul> </nav>

how to create fly out for ul li

I have an ul li structure that give me one fly out that is it gives me sub-menu but i want one more sub-menu on hover first sub-menu.
following is the structure
My Css
.main-navi li{
position: relative;
}
.main-navi li div,
.main-navi a{
display: block;
line-height: 80px;
text-transform: uppercase;
font-weight: 900;
padding-left: 30px;
color: #999;
border-bottom: 1px solid #FFFFFF;
position: relative;
z-index: 1;
background: #3a5795;
cursor: pointer;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div{
padding-left: 0;
border: none;
}
.main-navi li div{
position: relative;
z-index: 1;
background: #1A1A1A;
padding-left: 30px;
border-bottom: 1px solid #212121;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi a.active:hover,
.main-navi a.active{
padding-left: 50px;
color: #fff;
background: #ff3333;
cursor: default;
}
.main-navi .dot{
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
right: 30px;
background: #333;
border-radius: 50%;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div .corner,
.main-navi a .corner{
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
opacity: 0;
z-index: -1;
border-top: 40px solid transparent;
border-left: 20px solid #1A1A1A;
border-bottom: 40px solid transparent;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div.active .corner,
.main-navi a.active .corner{
right: -20px;
opacity: 1;
border-left: 20px solid #ff3333;
}
.main-navi a.active:hover .dot,
.main-navi a.active .dot{
background: #fff;
}
.main-navi li div:hover,
.main-navi a:hover{
padding-left: 50px;
color: #fff;
background: #151515;
}
.main-navi li div.active{
padding-left: 50px;
background: #ff3333;
color: #fff;
}
.main-navi li div:hover .dot,
.main-navi a:hover .dot{
background: #ff3333;
}
.main-navi li div.active .dot{
background: #fff;
}
.drop-down {
left: 0;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 0;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-track
{
background-color: #ff3333;
}
::-webkit-scrollbar-thumb
{
background-color: #ffffff;
}
::-webkit-scrollbar-button
{
background-color: #000000;
}
::-webkit-scrollbar-corner
{
background-color: black;
}
.main-navi li:hover .drop-down{
left: 100%;
opacity: 1;
}
.active .drop-down{
overflow: visible;
}
.main-navi .drop-down a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down a:hover{
padding-left: 40px;
}
<!-- code i created to get sub of sub menu-->
.drop-down-in {
left: 100;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 1;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi .drop-down li:hover .drop-down-in{
left: 200%;
opacity: 1;
}
.active .drop-down-in{
overflow: visible;
}
.main-navi .drop-down .drop-down-in a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down .drop-down-in a:hover{
padding-left: 40px;
}
<!--ends here-->
this is css that contains code for both sub and sub inside sub-menu. class drop-down works fine i want one more sub-menu so i created class drop-down-in which is not working.
My html code is:
<ul>
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
Here is a Fiddle to my question.

You forgot to add the class attribute with the value "main-navi" to your first "ul" element.
<ul class="main-navi">
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>
Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>
Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
</li>
And in CSS you schould update:
.main-navi li:hover .drop-down{
left: 100%;
}
If the value for "left" is 100%, than this element wont be visible.
Here you can find an updated Fiddle.

Using different browsers makes my nav bar slightly change?

I built my website mostly checking Google chrome to make sure everything was correct. With my nav bar in Google chrome it is perfect, however, when in IE or Fire Fox the dimensions are changed and they do not fit together correctly.
My website is noahtarr.com
CSS:
nav {
margin-top: -1px;
position: relative;
top: 0;
left: 0;
}
nav a {
margin-left: -3px;
margin-right: -1px;
padding: 10px 20px;
outline: none;
border-right: none;
border-bottom: none;
font-family: arial;
font-weight: bolder;
vertical-align: top;
text-decoration: none;
font-size: 13px;
line-height: 21px;
cursor: pointer;
background-color: #D1DBBD;
color: #3E606F;
-webkit-transition: all .9s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-ms-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
nav a:hover {
background-color: #91AA9D;
color:#193441;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-ms-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
}
nav a:first-child {
border-radius: 6px 0 0 0px;
}
nav a:last-child {
border-radius: 0 6px 0px 0;
}
nav a.active {
color: #193441;
border-radius: 8px 8px 0px 0px;
padding-top: 5px;
}
nav a.adjacent-active-left {
border-radius: 0px 8px 0px 0px;
}
nav a.adjacent-active-right {
border-radius: 8px 0px 0px 0px;
}
HTML:
<nav>
<a class="active" href="home.htm">Home</a>
<a class="adjacent-active-right" href="about.htm">About</a>
Services
Portfolio
Contact
</nav>

CSS Drop Down List Hover mouse not work

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?

Li tag is not aligning correctly in Chrome. How to fix it?

I am trying to create a menu and style it. I have also used some css animations to show a description (span) when hovered. This menu is working properly under Firefox. But in Chrome, there's a white space above the menu. When I check the li tag through Firebug, its show me that the li element is not aligned properly. Its moved upward. Its not happening on firefox. (please check the screenshots below). How can I fix this?
Update : I have just uploaded the site to Heroku : http://aqueous-wildwood-4051.herokuapp.com/. You will see the issue in this live site.
In chrome :
In Firefox :
Here's the code of my sidebar :
<aside id="sidebar" role="complementary">
<nav id="side-nav" role="navigation">
<ul>
<li ><div id='side-nav-home' class='listitem'><span class='listtitle'>Home</span><span class='description'>Home page of SLNYAA</span></div></li>
<li ><div id='side-nav-about' class='listitem'><span class='listtitle'>About Us</span><span class='description'>Learn more about us</span></div></li>
<li ><div id='side-nav-handbook' class='listitem'><span class='listtitle'>Handbook</span><span class='description'>Read our handbook</span></div></li>
<li ><div id='side-nav-join' class='listitem'><span class='listtitle'>Join Us</span><span class='description'>Join our program</span></div></li>
</ul>
</nav>
</aside>
Here is the CSS :
#sidebar {
border-left: 1px solid #EDEDED;
box-shadow: -3px 0 9px rgba(217, 217, 217, 0.2);
float: right;
min-height: 365px;
width: 24%;
#side-nav{
ul {
margin-top: 0px !important;
height: 187px;
list-style: none outside none;
margin-left: 0;
padding-left: 0;
width: 100%;
li{
height: 46px;
a{
text-decoration: none;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px #757575;
border-right: 1px solid rgba(217, 217, 217, 0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.listitem {
list-style: none outside none;
height: 32px;
text-align: center;
padding-top: 10px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.description {
visibility: hidden;
position: absolute;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
position: absolute;
margin-left: 8px;
margin-top: 4px;
opacity: 0;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
&:hover {
text-align: left;
.description {
visibility: visible;
opacity: 1;
}
.listtitle{
margin-left: 7px;
border-right: 1px solid #FFFFFF;
padding-right: 7px;
}
}
}
}
}
#side-nav-home{
background-color: #ED0042;
border: 2px solid #E87998;
}
#side-nav-about{
background-color: #e1cf3b;
border: 2px solid #C4BD80;
}
#side-nav-handbook{
background-color: #009dda;
border: 2px solid #5EADCC;
}
#side-nav-join{
background-color: #6ba01e;
border: 2px solid #98AB7D;
}
}
}
}

Add display: block to the a CSS style
#main-container-border #main-container #sidebar #side-nav ul li a {
display: block;
text-decoration: none;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px #757575;
border-right: 1px solid rgba(217, 217, 217, 0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
jsfiddle