title: How to display block on hover a tag
body: <p>how to open <code>div</code> tag <em>on hover</em> <code>a</code> tag</p>
  
  <p>this is my code for display div tag on hover a tag</p>
  
  <p><code>#Service</code> is <code>id</code> of <code>a</code> tag</p>
  
  <p><code>#Services</code> is <code>id</code> of <code>div</code> tag</p>
  
  <p>and my condition is a tag is define inside <code>ul</code> , <code>li</code> tag and <code>div</code> tag is define outside of <code>ul</code> tag</p>
  
  <pre><code>&lt;ul&gt;&lt;li&gt;&lt;a href="#" id="Service"&gt;Services&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  
  &lt;div id="Services"&gt;
      &lt;h1&gt;Hello&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#Services {
       display: none;
  }
  
  #Service:hover + #Services {
       display: block;
  }
  </code></pre>