Why this simple hover functionality is not working? Please help me

<!DOCTYPE html>
<html lang="en">
        <title>Swapping Songs</title>
            .sub_menu {
                display: none;
            .main_list:hover + .sub_menu {
                display: block;
        <ul class="main">
            <li class="main_list">
                <ul class="sub_menu">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>

What exactly are you expecting this code to do which it is not?

What did you want to happen when you hover over the list?

It’s not conventional to change the display property of an element using hover.

Replace + with >.

+ means the next sibling element, whereas > means a direct child element.

1 Like

When I hover over .menu_list class element I am expecting .sub_menu class element to be visible. But, it’s not happening.

Did you try the fix I mentioned? I did, and it worked.

Yes Lionel, Thank you for you help :slight_smile:

1 Like