一个hover怎么控制两个元素

一个hover控制两个元素：实现出来的效果就是，鼠标经过元素1，元素2的属性发生变化。

语法：

 选择器1:hover + 选择器2

.box:hover + .son{
    background-color: red;
}

选择器1:hover ~ 选择器2

  .box:hover~.son {
            background-color: red;
        }

 执行结果：

 它也可以用来做下拉菜单。需求：鼠标经过菜单项，菜单栏就出现，鼠标离开则消失。

html代码：

 <div class="nav">
        <a href="javascript:;">学习前端</a>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>

css代码：

* {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100px;
            margin: 100px auto;
            text-align: center;
        }

        ul {
            display: none;
            list-style: none;
            border: 1px solid #999;
            border-top: none;
        }

        .nav li {
            height: 30px;
            border-bottom: 1px solid #999;
        }

        .nav a {
            display: block;
            height: 30px;
            color: #000;
            text-decoration: none;
        }

        .nav a:hover {
            /* 盒子阴影：x偏移量，y偏移量，阴影模糊半径，阴影扩散半径，阴影颜色 */
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2);
        }
      
       /* 鼠标经过a，ul就出现 */
        .nav a:hover+ul {    
            display: block;
        }

执行结果：