html - 悬停显示一个div

Question

大家好，我是一个 CSS 新手，正在努力掌握“CSS”和“响应式”的艺术。这是我的代码，我想要做的是让 mobile-custom-sub-left 和 mobile-custom-sub-left-right 打开 .mobile-custom-将鼠标悬停在子菜单 li > ul 上。

<div class="mobile-custom-sub-left">Categories</div>
 <div class="mobile-custom-sub-left-right">All
    <ul class="mobile-custom-sub-menu">
    <li>
        <ul>
        <a href="#"><li>Restaurant</li></a>
            <a href="#"><li>Bars</li></a>
            <a href="#"><li>Food</li></a>
            <a href="#"><li>Wineries</li></a>
            <a href="#"><li>Shops</li></a>
            <a href="#"><li>Spa &amp; Beauty</li></a>
            <a href="#"><li>Adventures</li></a>
            <a href="#"><li>Experiences</li></a>
            <a href="#"><li>Hotels</li></a>
            <a href="#"><li>Art</li></a>
        </ul>
    </li>
    </ul>
    </div>

有效的 CSS!

.mobile-custom-sub-left-right:hover .mobile-custom-sub-menu li > ul{
display:block;
}

我正在努力让它工作的 css

.mobile-custom-sub-left:hover  div.mobile-custom-sub-left-right ul.mobile-custom-sub-menu li ul{
    display:block!important;
    }

Answer 1

编辑 fiddle 演示:http://jsfiddle.net/spk063/BCwFX/2/

.mobile-custom-sub-left:hover, .mobile-custom-sub-left-right:hover, .mobile-custom-sub-menu li  ul{
display:block;
}

你应该把你的 HTML 改成

<ul>
    <li><a href="#">Restaurant</a></li>
        <li><a href="#">Bars</a></li>
        <li><a href="#">Food</a></li>
        <li><a href="#">Wineries</a></li>
        <li><a href="#">Shops</a></li>
        <li><a href="#">Spa &amp; Beauty</a></li>
        <li><a href="#">Adventures</a></li>
        <li><a href="#">Experiences</a></li>
        <li><a href="#">Hotels</a></li>
        <li><a href="#">Art</a></li>
    </ul>