aabir/Menu

## Menu
<!doctype html>
<html>
<head>
	<title> Custom Menu </title>

    <style>
		.main-menu { width: 500px; margin: 0 auto; background: #666666; overflow: hidden; }
		ul { list-style: none; margin: 0; padding:0; display: inline; }
		ul li { display: inline-block;  background: #666666;  padding: 10px 5px;}
		ul li:hover { background: #ccc; }
		ul li a { text-decoration: none; color: #fff; display: block;  }
		ul li:hover ul { }

		ul ul { position: absolute; visibility: hidden; top: 0; top: 48px;  width: 150px; padding: 0;}
		ul ul li:first-child { padding-top: 10px; }
		ul ul li { width: 100%; margin-left: -5px; background: #ccc; float: none; }
		ul ul li a  {width: 100%; display: inline-block;}

		ul ul li:hover { background: #555; position: relative; }

		ul ul ul { left: 100%; top:0; }
		ul li:hover > ul { visibility: visible; }
		ul ul ul li { margin-left: 0; }
	</style>

</head>

<header>
<div class="main-menu">
	<ul>
    	<li> <a href="#">  Home </a> </li>
        <li> <a href="#"> About </a></li>
        <li> <a href="#"> Service </a>
        	<ul>
            	<li> <a href="#"> Web Development </a></li>
                <li> <a href="#"> Web Host </a></li>
                <li> <a href="#"> Web Ect. </a>
                    <ul>
                        <li> <a href="#"> Third 1st </a> </li>
                        <li> <a href="#"> Third 2nd </a> </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li> <a href="#"> Contact </a></li>
    </ul>
</div>
</header>
</html>