title: How to use vertical menus in HTML and css?
body: <p>How to use vertical menus and I have tried the vertical menu bar.Iam not using jquery or javascript only html and css.While iam mouseover this vertical menu it is not properly working.Please help me. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Vertical menu&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .headerouter1{clear:both;}
  .headerinner1{ margin:0 auto; width:990px;}
  .menustart{ background:url(images/menustart.png) no-repeat; width:16px; height:40px; float:left;}
  .menumiddle{background:url(images/menumiddle.png) repeat-x; width:900px; height:40px; float:left; }
  .menumiddle ul li{ float:left; font-family:Arial, Helvetica, sans-serif; padding:15px 20px 0px 20px;font-size:14px; background:url(images/menudivider.png) no-repeat;}
  .menumiddle ul li a{text-decoration:none; font-family:Arial, Helvetica, sans-serif;padding:15px 20px 0 20px;color:#FFFFFF;}
  .menumiddle ul li a:hover{ color:#000;}
  .menuend{ background:url(images/menuend.png) no-repeat; width:15px; height:40px;float:left;}
  .menumiddle ul{ margin:0px; }
  .menumiddle ul li{ list-style:none; float:left; }
  .menumiddle ul li a{ text-decoration:none;}
  .menumiddle ul li a:hover{ }
  .menumiddle ul li a.active{ }
  .menumiddle ul li ul{display: none;}
  .menumiddle ul li:hover ul{ margin-top:6px;position:absolute;width:195px;display:block;padding:15px 0px 0px 0px;background:#fff;  margin-left:-10px;border-bottom:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;}
  .menumiddle ul li:hover ul li a{float:left;clear:both;width:185px;font:bold 12px arial;color:#000;background:none; padding:0px 5px 4px 5px; border-bottom:1px solid #fafafa; border-radius:15px;margin-left:-20px; }
  .menumiddle ul li:hover ul li a:hover{ color:#009cff;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="headerouter1"&gt;
  &lt;div class="headerinner1 "&gt;
  
  &lt;div class="menustart"&gt;&lt;/div&gt;
          &lt;div class="menumiddle"&gt;
              &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
              &lt;ul style="list-style:none;"&gt;
              &lt;li&gt;&lt;a href-"#"&gt;sdsd&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href-"#"&gt;sdsd&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href-"#"&gt;sdsd&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href-"#"&gt;sdsd&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href-"#"&gt;sdsd&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
              &lt;ul style="list-style:none;"&gt;
              &lt;li&gt;&lt;a href-"#"&gt;sdsd&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href-"#"&gt;sdsd&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href-"#"&gt;sdsd&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href-"#"&gt;sdsd&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
              &lt;/li&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="menuend"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>