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

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

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.

4

Replace + with >.

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

1 Like
5

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

6

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

7

Yes Lionel, Thank you for you help :slight_smile:

1 Like