How to create drop down menu vertically using html and css?

[Pranoti Patil]

<style type="text/css">
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 600px; /*For KHTML*/
  list-style: none;
}
 
ul#navmenu-h li {
    margin: 0;
    border: 0 none;
    padding: 0;
    float: left; /*For Gecko*/
    display: inline;
    list-style: none;
    position: relative;
    width: 185px;  
 
}
 
 
ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 600px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
 
}
 
ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
 
ul#navmenu-h ul li {
  width: 300px;
 
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}
 
/* Root Menu */
ul#navmenu-h a {
  border: 1px solid #FFF;
  border-right-color: #D6C7A7;
  border-bottom-color: #D6C7A7;
  text-align:left;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #F1ECE1;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}
 
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #D6C7A7;
  color: #FFF;
    text-align:left;
 
}
 
/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #F1ECE1;
  color: #666;
 
 
 
}
 
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #D6C7A7;
  color: #FFF;
}
 
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  background: #F1ECE1;
  color: #666;
}
 
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  background: #D6C7A7;
  color: #FFF;
}
 
/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
  background: #F1ECE1;
  color: #666;
}
 
/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
  background: #D6C7A7;
  color: #FFF;
}
 
ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}
 
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}
 
ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}
 
</style>
 
<script type="text/javascript">
navHover = function() {
    var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
    for (var i=0; i<lis.length; i++) {
        lis[i].onmouseover=function() {
            this.className+=" iehover";
        }
        lis[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", navHover);</script>
 
 
 
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" valign="top"> <ul id="navmenu-h">
 
    <li><a href="#"> home &raquo;</a>
        <ul> <li><a href="#">abc</a>
 
          <a href="#">pqr</a>         
           <a href="#">Top  REVIEW sites  &raquo;</a>
 
          </li>
           </li> 
 
        </ul>
    </li>
 
  </ul></td>
    </tr>
    <tr>
      <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="20%" align="left" valign="top">&nbsp;</td>
          <td width="80%" align="left" valign="top"><form name="form1" method="post" action="">
 
 
                    </form>
          </td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td align="center" valign="top">&nbsp;</td>
    </tr>
  </table>

[Death Slaught]

What problem are you having, what browser are you having it in, what have you tried to do to fix it. Please remember to give information about the problem when posting questions.

The links in your sub menu each need to be in their own list element.

    <li><a href="#"> home &raquo;</a>
        <ul>
            <li><a href="#">abc</a></li>
            <li><a href="#">pqr</a></li>       
            <li><a href="#">Top  REVIEW sites  &raquo;</a></li>
 
           </li> 
 
        </ul>
    </li>

This does create a positioning issue, but I don't have time to look at it right now.


Thanks, Death