CSS transition not when child is selected - css

Question

I've got a side navigation with the items flying out when they are hovered. Now I've added a second level to the navigation. The problem is that the li a with sub-items fly only out when a sub-link is hovered.
Possible scenarios:
Parent with child hovered: parent flies out
Child hovered: child flies out (but not parent)
Parent without child hovered: parent flies out
Here is a JSBin of what I mean:
http://jsbin.com/zusoyeweqa/edit?html,css,js,output
How can I have only the list-element selected fly transitioned?
This is the HTML:
<nav id="site-navigation" role="navigation">
<ul class="side-nav">
<li>Blog
<ul>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li>Tools</li>
</ul>
</nav>
This is the CSS
#site-navigation ul>li{
font-size: 1.6em;
width: auto;
float: right;
display: block;
clear: both;
line-height: 1em;
margin-bottom: 1px;
}
#site-navigation ul>li a{
-webkit-transition: all 0.3s ease-in-out;
-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-family: "Oswald",Arial,sans-serif;
text-transform: uppercase;
background: #FFF;
color: #000;
padding: .25em;
width: auto;
}
#site-navigation ul>li a:hover{
background: #c00;
color: #fff;
padding-right: 1em;
}
#site-navigation ul>li>ul>li a {
color: #FFF;
background: none;
}
EDIT: Added a jsbin http://jsbin.com/zusoyeweqa/edit?html,css,js,output

Answer 1

I hope this helps ..
replace yous css with following
#site-navigation .side-nav>li{
font-size: 1.6em;
width: auto;
float: right;
display: block;
clear: both;
line-height: 1em;
margin-bottom: 1px;
}
#site-navigation .side-nav>li a{
-webkit-transition: all 0.3s ease-in-out;
-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-family: "Oswald",Arial,sans-serif;
text-transform: uppercase;
background: #FFF;
color: #000;
padding: .25em;
width: auto;
position:relative;
}
#site-navigation ul>li a:hover{
background: #c00;
color: #fff;
right: 1em;
}
#site-navigation ul>li a:hover .{
background: #c00;
color: #fff;
right: 1em;
}

Answer 2

You can use position relative and right to fly only the selected item out.
#site-navigation .side-nav>li{
font-size: 1.6em;
width: auto;
float: right;
display: block;
clear: both;
line-height: 1em;
margin-bottom: 1px;
}
#site-navigation .side-nav>li a{
-webkit-transition: all 0.3s ease-in-out;
-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-family: "Oswald",Arial,sans-serif;
text-transform: uppercase;
background: #FFF;
color: #000;
padding: .25em;
width: auto;
/* Use position relative and right to fly out. */
position: relative;
right: 0;
}
#site-navigation ul>li a:hover{
background: #c00;
color: #fff;
/* Use right to fly out. */
right: 1em;
}