Question

I am trying to find a way so when a user hovers over an li element it changes the background color of the <li> taking up the whole width of the dropdown and not just the <a> area. This is what I tried so far.

Markup

                    <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

Adding display:block; to your “.dropdown li” may be a solution, but it is dependent on your particular case….
Do you have a live demo somewhere?