大家好,我是一个 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 & 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;
}
最佳答案
编辑 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 & 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>
关于html - 悬停显示一个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21415252/