title: Show div when hover another div by using only css
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#bf20_menu {width:100%;
        height:50px;
        background-color:#262626;
        border-bottom:1px solid rgb(255, 255, 255, .2);
    margin-top:100px;
        }
        
  #bf20_menu &gt; 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 &gt; ul &gt; li:nth-child(4) {border-right:1px solid rgb(255, 255, 255, .2);}
  
  #bf20_menu &gt; ul &gt; li &gt; 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bf20_menu"&gt;
          &lt;ul&gt;
              &lt;li class="bf20_menu_li bf20_menu_li_active"&gt;&lt;a href="#bf20_menu_href1"&gt;test1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="bf20_menu_li"&gt;&lt;a href="#bf20_menu_href2"&gt;test2&lt;/a&gt;&lt;/li&gt;
              &lt;li class="bf20_menu_li"&gt;&lt;a href="#bf20_menu_href3"&gt;test3&lt;/a&gt;&lt;/li&gt;
              &lt;li class="bf20_menu_li" id="bf20_hover"&gt;&lt;a href="#bf20_menu_href4"&gt;hover this!&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          
          &lt;p id="bf20_hoverbox"&gt;something&lt;/p&gt;
          
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>i wanna make hidden div box (id name is &quot;bf20_hoverbox&quot;) is appear when i hover li (id name is &quot;bf20_hover&quot;) 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 &quot;+&quot; &quot; &quot;, cause i saw this is the solution in stack overflow.
  which is totally not work in my code;;; dont know the reason;;</p>
  <p>any help will be so appreciate!
  thanks!!</p>