Show div when hover another div by using only css

Question

#bf20_menu {width:100%;
      height:50px;
      background-color:#262626;
      border-bottom:1px solid rgb(255, 255, 255, .2);
  margin-top:100px;
      }
      
#bf20_menu > ul {text-align:center;
            width:100%;
            height:inherit;
            display:flex;
            justify-content: center;
            margin:0 auto;}   
      
.bf20_menu_li {float:left;
                 list-style-type:none;
                 color:white;
                 width:15%;
                 height:100%;
                 display: inline-block;
                 border-left:1px solid rgb(255, 255, 255, .2);
                 box-sizing: border-box;
                 padding-top:15px;}

#bf20_menu > ul > li:nth-child(4) {border-right:1px solid rgb(255, 255, 255, .2);}

#bf20_menu > ul > li > a {color:white;
                     font-weight:400;
                     width: 100%;
                     display: block;}

@media screen and (max-width: 1120px) {.bf20_menu_li { width:25%; } }

#bf20_hoverbox { background-color: gray;
                 display: inline-block;
                 position: absolute;
                 top: 64%;
                 padding: 5px 15px;
                 border-radius: 15px;
                 left: 70%;
                 transition:all 1s;
                 display:none;}
                 
#bf20_hover + #bf20_hoverbox{
    display:block;
}

#bf20_hover #bf20_hoverbox{
    display:block;
}

<div id="bf20_menu">
        <ul>
            <li class="bf20_menu_li bf20_menu_li_active"><a href="#bf20_menu_href1">test1</a></li>
            <li class="bf20_menu_li"><a href="#bf20_menu_href2">test2</a></li>
            <li class="bf20_menu_li"><a href="#bf20_menu_href3">test3</a></li>
            <li class="bf20_menu_li" id="bf20_hover"><a href="#bf20_menu_href4">hover this!</a></li>
        </ul>
        
        <p id="bf20_hoverbox">something</p>
        
    </div>

i wanna make hidden div box (id name is "bf20_hoverbox") is appear when i hover li (id name is "bf20_hover") so i searched it on google and tried the solution but not worked in my code. even if i do exactly same.. as you can see in my css at the last. i used "+" " ", cause i saw this is the solution in stack overflow. which is totally not work in my code;;; dont know the reason;;

any help will be so appreciate! thanks!!

Does this answer your question? [CSS display hidden element when hover another](https://stackoverflow.com/questions/15814504/css-display-hidden-element-when-hover-another) — Shounak Das, Nov 16 '20 at 02:52
yes that question is same with my question, but the solution is not working in my code :( — user13851719, Nov 16 '20 at 02:56
Does `#bf20_hover:hover #bf20_hoverbox{display:block;}` works? — Dyeizon Procopiuk, Nov 16 '20 at 03:10
Hi! thanks for your help, but unfortunately, that it is work :( — user13851719, Nov 16 '20 at 06:33

score 1 · Accepted Answer · answered Nov 16 '20 at 08:24

Try like this:

#bf20_menu {width:100%;
      height:50px;
      background-color:#262626;
      border-bottom:1px solid rgb(255, 255, 255, .2);
  margin-top:100px;
      }
      
#bf20_menu > ul {text-align:center;
            width:100%;
            height:inherit;
            display:flex;
            justify-content: center;
            margin:0 auto;}   
      
.bf20_menu_li {float:left;
                 list-style-type:none;
                 color:white;
                 width:15%;
                 height:100%;
                 display: inline-block;
                 border-left:1px solid rgb(255, 255, 255, .2);
                 box-sizing: border-box;
                 padding-top:15px;}

#bf20_menu > ul > li:nth-child(4) {border-right:1px solid rgb(255, 255, 255, .2);}

#bf20_menu > ul > li > a {color:white;
                     font-weight:400;
                     width: 100%;
                     display: block;}

@media screen and (max-width: 1120px) {.bf20_menu_li { width:25%; } }

#bf20_hoverbox { background-color: gray;
                 display: inline-block;
                 position: absolute;
                 top: 64%;
                 padding: 5px 15px;
                 border-radius: 15px;
                 left: 70%;
                 transition:all 1s;
                 display:none;}
                 
#bf20_hover + #bf20_hoverbox{
    display:block;
}

#bf20_hover:hover #bf20_hoverbox{
    display:block;
}

<div id="bf20_menu">
        <ul>
            <li class="bf20_menu_li bf20_menu_li_active"><a href="#bf20_menu_href1">test1</a></li>
            <li class="bf20_menu_li"><a href="#bf20_menu_href2">test2</a></li>
            <li class="bf20_menu_li"><a href="#bf20_menu_href3">test3</a></li>
            <li class="bf20_menu_li" id="bf20_hover">
               <a href="#bf20_menu_href4">hover this!</a>
               <p id="bf20_hoverbox">something</p>
            </li>
        </ul>
    </div>

The reason your CSS didn't work is because #bf20_hover and #bf20_hoverbox are not siblings/descendants, rather the parent element of #bf20_hover is a sibling of #bf20_hoverbox. You can resolve this by moving #bf20_hoverbox inside #bf20_hover, then using #bf20_hover:hover #bf20_hoverbox in your CSS.

oh!!!! i got it! thank you so much!!!! have a great day!! :D — user13851719, Nov 17 '20 at 01:33
You're welcome! I'm glad it made sense, have a great day too :) — sbgib, Nov 17 '20 at 07:50

Show div when hover another div by using only css

1 Answers1