Html CSS菜单悬停一个子元素，同时更改和所有其他元素

我对菜单有问题。。。当我将鼠标悬停在一个

元素上时，我希望打开一个下拉菜单，仅当我将鼠标悬停在一个特定的
元素上时，其他
元素才能同时缩小50%。我不知道我是否解释得很好，但这里是我到目前为止所做的代码和一个js提琴来查看它的运行情况。。。我只能通过悬停的
元素来实现这一点，但我想在所有其他方面都做到这一点

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>

这是小提琴：
这个怎么样？

这听起来非常难看，但需要Javascript/JQ才能实现。使用通用同级选择器“~”：nav>ul>li可以得到2、3和4到50%。a:hover~li{width:50%；}我无法得到1来实现同样的效果。。我会用jQuery来做这个。当你说小50%是什么意思？文本大小？宽度？身高？总体规模？您只需要javascrpt，不需要jQuery@badAdviceGuy我指的是元素的宽度。谢谢大家的回答。最适合我的问题的答案是Ruben Verschueren和roastbeef，然后我会像你说的那样使用javascript，因为我搜索了一点，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;}

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