css - 下拉菜单在悬停时更改背景颜色

Question

我正在尝试找到一种方法，当用户将鼠标悬停在 li 元素上时，它会更改 <li> 的背景颜色占据下拉菜单的整个宽度，而不仅仅是 <a>区域。到目前为止，这是我尝试过的。

标记

                    <ul class="dropdown">
                        <li><a href="#">Visit the castle</a></li>
                        <li><a href="#">Dancing Building</a></li>
                        <li><a href="#">Nightlife</a></li>
                        <li><a href="#">Museums</a></li>
                    </ul>

CSS

.dropdown{display:block; position:absolute; background-color:black; margin-left:65px; height:190px;}
.dropdown li:hover{background-color:#333; padding:0px;}
.dropdown li a{display:block;}

Answer 1

添加显示: block ；您的“.dropdown li”可能是一个解决方案，但这取决于您的具体情况....你有现场演示吗？