CODEWITHSUNDEEP
htmlcssdisplay
Hadisur Rahman
Hadisur Rahman

Reputation: 826

How the css property display none, and block works in html file?

This is my code , and running well, but my problem is in the css file, i know the "display" css properties very well and how it work but below code actually it is a dropdown manu code, {display:none} means nothing will show, and {display:block} is used for only inline elements. Now my Question is for which hidden properties of display when i hovering to DropDown button it will show me the manu,s?

#o2 li a{ background-color: burlywood}

ul li{
    list-style-type: none;
    position: absolute;
}

ul li a{
    text-decoration: none;
    display: block;
}
#o2 li:hover .mainbtn{
    background-color: yellow;
}
#o2 li .dpbtn{
    display: none;
}
#o2 li:hover .dpbtn{
    display: block;
}
<ul id="o2">
    <li><a class="mainbtn" href="#">DropDown</a>
        <div class="dpbtn">
            <a href="#">manu1</a>
            <a href="#">manu1</a>
            <a href="#">manu1</a>
        </div>
    </li>
</ul>

Upvotes: 1

Views: 553

Answers (1)

focus.style
focus.style

Reputation: 6760

According to your code, when we hovering li - the .dpbtn has properties display: block;. When your cursor is on any inside element, for example a - you are still hovering li, because a is inside li, the part of it.

enter image description here

UPDATED .dpbtn is div element. if we don't set any displey property - it will be BLOCK by default, not none every element is visible by default, if we want to hide it - we should use display none.

After using display none - we should rewrite this behavior for :hover action.

Display block works for all the elements if you are giving this property in case file. There are lots of elements which has block display by default. Like h and p, div and sections ... But if you are making them display none, so may be at some point you need to make them block again.. so display block works inline and on block elements, both @Atul

Upvotes: 2

Related Questions