title: how to add drop down in list menu in HTML web page
body: <p>I have web page i want to add the drop down menu On Reference button i am using following code for css
  I want like this website given template I am new to css please help</p>
  
  <p><a href="http://www.psdgraphics.com/templates/black-horizontal-html-and-css-dropdown-menu/" rel="nofollow">http://www.psdgraphics.com/templates/black-horizontal-html-and-css-dropdown-menu/</a></p>
  
  <h2>This is the CSS File</h2>
  
  <pre><code>   .menu {
  float:right;
  margin: 39px 18px 0 0;
  height:47px;
  background-repeat:no-repeat;
     }
  
  
  
      .menu ul li {
  list-style:none;
  float:left;
      }
  
  
  
     menu.sub-menu {
  visibility: hidden;
  position: absolute;
  padding:10px;
  top: 48px;
  left: 0;
  z-index: 598;
  background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
   }
  
      .menu ul li a {
  text-decoration:none;
  display:block;
      }
  
  
      .menu .active {
  text-decoration:none;
  background-image:url();
      }
  
     .menu .stix {
  width:2px;
  font-size:0px;
  background-image:url(image/seperator.gif);
  background-repeat:no-repeat;
  padding:0;
  height:47px;
      }
  </code></pre>
  
  <p>below is my HTML code</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;ul&gt;
          &lt;li class="stix"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#page_one"&gt;&lt;img src="image/overview_active.png" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="stix"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#page_two"&gt;&lt;img src="image/strategy.gif"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="stix"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image/draxxin.gif"/&gt;&lt;/a&gt;&lt;/li&gt; 
          &lt;li class="stix"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image/excede.gif"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="stix"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image/results.gif"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="stix"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image/reference.gif"/&gt;&lt;/a&gt;&lt;/li&gt; 
          &lt;li class="sub-menu"&gt;DRAXXIN&lt;/li&gt;
          &lt;li class="stix"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>