CSS 过渡不是在选择子项时

Question

我有一个侧面导航，当物品悬停时，它们会飞出。现在，我已向导航添加了第二个级别。问题是，只有当子链接悬停时，带有子项的li a才会飞出。

可能的情况：

1. 有孩子的父母悬停：父母飞出
子级
2. 悬停：子级飞出（但不是父级）
没有子项的父项悬
3. 停：父项飞出

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

如何仅转换选定的列表元素？

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

Answer 2

您可以使用位置相对和右侧仅将所选项目飞出。

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