How to create beautiful Sub menu with HTML/CSS

Everybody we know that menu is important for any webpage.Basically a lot of menu created by Javascript/Jquery and HTML/CSS.My own created simple submenu, you can add to your site.It's customize by html/css and used two types of tags <ul> and <li>.If you want to add this submenu of your site just follow my instruction.See demo below..

Step 1: First copy this CSS code and paste in Head tags.

<style type="text/css">
#navigationm{ width:750px; height:45px; margin:auto;}
#navigationm ul{ margin:0px; padding:0px; list-style:none;}
#navigationm ul li{ float:left; width:150px; position:relative;}
#navigationm ul li a{ text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:14px; display:block; background:#0f6581; color:#ffffff; line-height:45px; text-align:center;}
#navigationm ul li a:hover{ background:#3bbdcd; color:#000000;}
#navigationm ul ul { position:absolute; visibility:hidden;}
#navigationm ul li:hover ul{ visibility:visible;}
#navigationm ul li:hover ul li{ float:left;}
</style>

Step 2: Then copy this html code and paste in HTML/XHTML/WML/JAVASCRIPT box.

<div id="navigationm">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="location.html">Location</a></li>
<li><a href="services.html">Services</a>
<ul>
<li><a href="staff-careers.html">Careers</a></li>
<li><a href="contact-us.html">Contact us</a></li>
<li><a href="click-here.html">Click Here to View</a></li>
<li><a href="Lifeline–Emergency.html">Lifeline</a></li>
</ul>
</li>
<li><a href="childrens-programs.html">Programs</a></li>
</ul>
</div>

Replace href blue link with the name of your link.
Now you are done.