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

Question

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>

Can you describe your question with other words? Hard to understand. — focus.style
– focus.style, Commented Apr 26, 2020 at 17:05
when hovering , the manu1, manu2 shows, and it works for display block properties, but why? coz we use display block properties for inline elemets. — Hadisur Rahman
– Hadisur Rahman, Commented Apr 26, 2020 at 17:28
"{display:block} is used for only inline elements". No, it isn't. — Álvaro González
– Álvaro González, Commented Apr 26, 2020 at 17:31
"{display:block} is used for only inline elements". No, it isn't. ------describe please why? — Hadisur Rahman
– Hadisur Rahman, Commented Apr 26, 2020 at 17:34
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 Rajput
– Atul Rajput, Commented Apr 26, 2020 at 17:41

focus.style · Accepted Answer · 2020-04-26 18:18:30Z

2

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.

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

edited Apr 26, 2020 at 18:18

answered Apr 26, 2020 at 17:36

focus.style

6,7704 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

focus.style Over a year ago

All elements inside li - part of the il. When you hovering child elements - you are although hovering li at the same time.

Hadisur Rahman Over a year ago

if so, then why we need to used display none first and then display block??????

focus.style Over a year ago

display none is hiding .dpbtn , and when we hovering li - the .dpbtn appears. It's so simple, so I even don't know hove to explain. What result so you need to reach?

Hadisur Rahman Over a year ago

as u said display none is hiding .dpbtn , and when we hovering li - the .dpbtn appears. but in hovering u assign display block, why we used their display block whereas u make it none before?

focus.style Over a year ago

display block sets by default by browser.

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related