title: css hover want to display a box
body: <p>I want to create a menu where whenever you hover over a "button" in my menu,it displays some text,but have an issue with doing it in css.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link type = "text/css" rel = "stylesheet" href = "home.css"/&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id = "menu"&gt;
  
  &lt;a class = "button"&gt;&lt;span&gt;222&lt;/span&gt;&lt;/a&gt;
  &lt;a class = "button"&gt;&lt;span&gt;222&lt;/span&gt;&lt;/a&gt;
  &lt;a class = "button"&gt;&lt;span&gt;222&lt;/span&gt;&lt;/a&gt;
  &lt;a class = "button"&gt;&lt;span&gt;222&lt;/span&gt;&lt;/a&gt;
  &lt;a class = "button"&gt;&lt;span&gt;222&lt;/span&gt;&lt;/a&gt;
  &lt;a class = "button"&gt;&lt;span&gt;222&lt;/span&gt;&lt;/a&gt;
  &lt;a class = "button"&gt;&lt;span&gt;222&lt;/span&gt;&lt;/a&gt;
  &lt;a class = "button"&gt;&lt;span&gt;222&lt;/span&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;span class = "box_menu"&gt;&lt;p&gt;asfqwqs&lt;/p&gt;&lt;/span&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#menu {
  width:70%;
  height:35px;
  margin:0 auto;
  border-radius:0px 0px 3px 3px;
  box-shadow:1px 2px 3px 2px #1F0000;
  }
  body{
  background-color:#562500;
  background:url('image_for_website.jpg') repeat;
  }
  
  a.button{
  display:inline;
  position:relative;
  font-size:12px;
  font-family:"Comic Sans MS", cursive, sans-serif;
  color:white;
  height:26px;
  
  
  }
  a.button span {
  display: block;
  line-height: 30px;
  border-right:1px solid rgb(0,0,0);
  float:left;
  width:10%;
  padding:3px;
  } 
  a.button:hover span{
  background:rgba(0,0,0,0.3);
  cursor: pointer;
  }
  a.box_menu{
  position:absolute;
  display:none;
  width:20px;
  border:1px solid #333333;
  color:white;
  font-size:12px;
  font-family:"Comic Sans MS", cursive, sans-serif;
  background:rgba(2,2,2,0.7);
  margin-top:18%;
  margin-left:15%;
  border:1px solid white;
  }
  a.box_menu:hover span{
  display:block;
  }
  </code></pre>
  
  <p>So, whenever i hover over a span from an anchor class button(let's say first one),i want a box of text which is essentially a span with class box_menu to apper.So how do i do it?please help.Thanx in advance.</p>