CSS菜单将一个子元素悬停，并同时更改所有其他元素。

Question

我对菜单有问题..。我希望当我在<li>元素上悬停时，打开下拉菜单，并使其他<li>元素在同一时间内更小50%，只有当我在特定的<li>元素中悬停时。我不知道我是否解释得很好，但这是我到目前为止所做的代码和一个js小提琴来看它的行动.我只能通过悬停的<li>元素来完成这个任务，但是我想要做到这一点，而且在所有其他方面都是如此。

HTML代码：

<nav>
   <ul>
       <li><a href="#">1</a></li>
       <li class="a">
           <a href="#">2</a>
           <ul class="hide-menu a1">
               <li><a href="#">1-1</a></li>
               <li><a href="#">2-2</a></li>
               <li class="b">
                   <a href="#">3-3</a>
                   <ul class="hide-menu b1">
                       <li><a href="#">1-1-1</a></li>
                       <li><a href="#">2-2-2</a></li>
                       <li><a href="#">3-3-3</a></li>
                       <li><a href="#">4-4-4</a></li>
                   </ul>
                </li>
                <li><a href="#">4-4</a></li>
            </ul>
            </li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</nav>

CSS代码：

nav {background-color:grey;width:200px;position:relative;}
ul {list-style:none;padding:0;margin:0;}
li{width:100%;background-color:red;margin-top:10px;text-align:center;padding:10px 0;}
a{text-decoration:none;}
.hide-menu {display:none;position:absolute;}
nav li.a:hover ul.a1 {display:block;}
nav li.b:hover ul.b1 {display:block;}
nav > ul > li.a:hover {width:50%;}
.a1{left:100px;top:39px;}
.b1{left:50px;top:99px;}
.a1 > li{background-color:purple;width:50px;}
.b1 > li{background-color:cyan;width:50px;}

这是小提琴：http://jsfiddle.net/ELnX5/1/

Answer 1

这个怎么样？

http://jsfiddle.net/ELnX5/3/

nav {background-color:grey;width:200px;position:relative;}
ul {list-style:none;padding:0;margin:0;}
li{width:100%;background-color:red;margin-top:10px;text-align:center;padding:10px 0;}
a{text-decoration:none;}
.hide-menu {display:none;position:absolute;}
nav li.a:hover ul.a1 {display:block;}
nav li.b:hover ul.b1 {display:block;}
nav > ul > li.a:hover ~ li{width:50%;}
.a1{left:100px;top:39px;}
.b1{left:50px;top:99px;}
.a1 > li{background-color:purple;width:50px;}
.b1 > li{background-color:cyan;width:50px;}