手风琴二级菜单 hover显示失败问题

想做个手风琴的二级菜单，对item盒子hover后，让它的子元素

display:blcok，可以实现效果。
但是想通过对h3进行hover，使其兄弟元素
display:blcok ，这种做法没成功

<div class="dd">
                    <div class="item">
                        <h3 class="it"><a href="#">生活类</a></h3>
                        <ul>
                            <li><a href="#">服装配饰</a></li>
                            <li><a href="#">运动健身</a></li>
                            <li><a href="#">私人形象设计</a></li>
                            <li><a href="#">营养均衡食谱设计</a></li>
                        </ul>
                    </div>
                    <div class="item">
                        <h3 class="it"><a href="#">娱乐类</a></h3>
                        <ul>
                            <li><a href="#">手办</a></li>
                            <li><a href="#">电影</a></li>
                            <li><a href="#">营养均衡食谱设计</a></li>
                        </ul>
                    </div>
                    <div class="item">
                        <h3 class="it"><a href="#">资源共享</a></h3>
                        <ul>
                            <li><a href="#">Office资源</a></li>
                            <li><a href="#">视频制作</a></li>
                            <li><a href="#">一对一课程及习题讲解</a></li>
                            <li><a href="#">专业志愿填报辅导</a></li>
                        </ul>
                    </div>
                </div>

.dropdown .item:hover >ul {
    display: block;

}/*成功了
/*.dropdown .it:hover ul {
    display: block;

}*/失败了

https://www.jianshu.com/p/0f73c664377a