选择子项时不进行 CSS 过渡

Question

我有一个侧面导航，元素悬停时会飞出。现在我在导航中添加了第二层。问题是带有子项的 li a 只有在悬停子链接时才会飞出。

可能的场景:

1. parent 带着 child 徘徊: parent 飞出
2. child 悬停: child 飞出(但不是 parent )
3. 没有 child 的 parent 徘徊: parent 飞出

这是我的意思的 JSBin: http://jsbin.com/zusoyeweqa/edit?html,css,js,output

我怎样才能只对选定的列表元素进行 fly 转换？

这是HTML:

<nav id="site-navigation" role="navigation">
   <ul class="side-nav">
      <li><a href="#">Blog</a>
         <ul>
            <li><a href="#">Sub Link 1</a></li>
            <li><a href="#">Sub Link 2</a></li>
         </ul>
      </li>
      <li><a href="#">Tools</a></li>
   </ul>
</nav>

这是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;
}

编辑:添加了一个 jsbin http://jsbin.com/zusoyeweqa/edit?html,css,js,output

Answer 1

我希望这对您有所帮助..

用以下内容替换你的 css

#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;
}