CODEWITHSUNDEEP
htmlcss
SƲmmēr Aƥ
SƲmmēr Aƥ

Reputation: 2504

CSS Selectors Hover does not work

The styling does not change the display to block when hovering. I would appreciate any comments.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>CSS Selectors</title>
    <style>
        div ul li:hover> ul {
            display:block;
        }
    </style>
</head>
<body>
    <div id="container">
        <ul>
            <li> List Item
                <ul style="display:none;">
                    <li> Child </li>
                </ul>
            </li>
            <li> List Item </li>
            <li> List Item </li>
            <li> List Item </li>
        </ul>
    </div>
</body>
</html>

Upvotes: 0

Views: 132

Answers (3)

Tamil Selvan C
Tamil Selvan C

Reputation: 20239

Use !important for display: block;

Try

div ul li:hover > ul {
    display:block!important;
}

Upvotes: 1

Blake Mann
Blake Mann

Reputation: 5490

There are three reasons:

  1. You cannot have a space in the pseudo selector.

  2. Inline styles take precedence over embedded, so even if your selector is correct, the display: block; will have no effect.

  3. You are selecting a ul which is a direct child of the div, whereas the ul that is set to not display is a child of the ul which is inside of the div, so that won't work.

Try something like this:

div ul ul {
    display: none;
}
div:hover ul ul {
  display:block;
}

Upvotes: 9

Ryan Willis
Ryan Willis

Reputation: 624

Change your css to 

div ul li:hover{
    display:block;
}

Upvotes: 0

Related Questions