Doubt In Collapsibles

#1
  1. one
  • 1.1 one point one
  • 1.2 one point two
  • two
    •         <ul>
            <li> 2.1 two point one</li>
        <ul>
            <li> 2.1.1 two point one point one </li>
            <li> 2.1.2 two point one point two </li>
        </ul>
        </ul>
        <li>three</li>
        <ul>
            <li> 3.1 three point one </li>
        </ul>
        
    </ol>
</body>

    CSS

    ol ul{
    display:none
    }
    ol{
    color:purple;
    }

    li:hover{
    color:red;
    }

    ol:hover > ul{
    color:red;
    display:block;
    }

    ul:hover > ul{
    color:blue;
    display:block;
    }

    Question:
    1 When the command says “ol:hover > ul” the styling should be executed only for the ul just beneath(immediate child) an ol which is being hovered over. But all the ul child of ol displays even if one of the ol is hovered over. Why? Pls explain

    2 Another issue is that i want the display to emerge only when the exact text is hovered on, but the collapsibles emerge even if the mouse hovers on the spaces parallel to the text. How to resolve this?

    #2

    @Darsh-Pratap-325457197922299

    #3

    for your second doubt, check the display property of the collapsibles, and try to check the exact area covered by it by using browser inspector. and set it to inline or inline-block

    and for the first one, > means all the direct child of the parent, it does not have numbered relation with children.