Auto drop down navigation bar

When your website grows larger,you might need a drop down navigation bar. As it will help you to make money online.

Why drop down menu?
1.Easier surfing
2.More professional

How to do it?
Paste this code into your css file.
For blogger,go to Layout>EDIT HTML and paste it into suitable place.


/*--------------- menu pro -------------------*/
#menuh-container
{
position: relative;
top: 0px;
left: 0px;
}

#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
background:royalblue;
}

#menuh a
{
text-align: center;
display:block;
border: 1px solid royalblue;
white-space:nowrap;
margin:0;
padding: 0.3em;
}

#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */
{
color: white;
background-color: royalblue;
text-decoration:none;
}

#menuh a:hover      /* menu on mouse-over  */
{
color: white;
background-color: cornflowerblue;
text-decoration:none;
}

#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWqyVEJ79z49cyPxeCsbRQBSTehSseWPI-Lj2E-J8Ugj0bVi3hZyqU-8GN_VExNn74m90DqjPxl0Exa8QIaKl-3TscWCArXr1LnC7i3Lowv32fkbxV26lhtuPmhRkAF9dUkIG858idTE/);
background-position: right center;
background-repeat: no-repeat;
}

#menuh a.parent, #menuh a.parent:hover  /* attaches side-arrow to all parents */
{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwwtF_BsGHSHrFgPk4af_A4txgHuIGFXdUa3mOyZY78COV2VPoUv6MveNivdadofj7Vd-IEUGE4eRSCE9w3ZbniCnc6QawuT_cdbc0oN4Nfjs0nRt0R4fhWMwb3VvXtsX_nvQz_BuVBM/);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em; /* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}

#menuh li
{
position:relative;
min-height: 1px;  /* Sophie Dennis contribution for IE7 */
vertical-align: bottom;  /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursor:pointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

However this code will output an error on IE version less than 7.Therefore need to add below code just above your </head>. This code will add on csshover.htc to browser if the version is IE version which is less than 7.

This code has been tested to work in various websites. To add it you have to upload csshover.htc to your upper directory or file host, then paste the url in the coloured area(you can use mine if you cannot find a file host)


<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(http://sites.google.com/site/davidng777/files/csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->

Finally, add a HTML/Javascript with code below.


<div id="menuh-container">
<div id="menuh">
<ul>
<li><a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#">Sub 1:1</a></li>
<li><a href="#" class="parent">Sub 1:2</a>
<ul>
<li><a href="#">Sub 1:2:1</a></li>
<li><a href="#">Sub 1:2:2</a></li>
<li><a href="#">Sub 1:2:3</a></li>
<li><a href="Sub 1:2:4</a></li>
</ul>
</li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#" class="parent">Sub 1:4</a>
<ul>
<li><a href="#">Sub 1:4:1</a></li>
<li><a href="#">Sub 1:4:2</a></li>
<li><a href="#">Sub 1:4:3</a></li>
<li><a href="#">Sub 1:4:4</a></li>
</ul>
</li>
<li><a href="#" class="parent">Sub 1:5</a>
<ul>
<li><a href="#">Sub 1:5:1</a></li>
<li><a href="#">Sub 1:5:2</a></li>
<li><a href="#">Sub 1:5:3</a></li>
<li><a href="#">Sub 1:5:</a></li>
<li><a href="#">Sub 1:5:5</a></li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><a href="#">Item 2</a>
</li></ul>

... repeat and alter the list as needed

</div>  <!-- end the menuh-container div -->
</div> <!-- end the menuh div -->