ทำ Menu CSS แบบ Sub menu แล้ว ออกว่าหน้าต่างเหมือน เมนูหลัก อยากได้แบบในภาพต้องทำอย่างไรคะ

 <div id="button">

<ul>
<li><a href="#nogo">Client Services</a>
	<ul>
		<span><a href="#nogo">Business Technology</a></span>
		<span><a href="#nogo">Corporate Finance</a></span>
		<span><a href="#nogo">Human Resource</a></span>
        <span><a href="#nogo">Organization</a></span>
		<span><a href="#nogo">Marketing and Sale</a></span>
		<span><a href="#nogo">Risks</a></span>
        <span><a href="#nogo">Strategic</a></span>
		<span><a href="#nogo">Sustainability & Resource Productivity</a></span>
   
	</ul>
</li>
<li><a href="#nogo">Industries</a>
	<ul>
		<span><a href="#nogo">Advanced Electronics</a></span>
		<span><a href="#nogo">Aerospace & Defense</a></span>
		<span><a href="#nogo">Automotive & Assembly</a></span>
        <span><a href="#nogo">Chemicals</a></span>
		<span><a href="#nogo">Consumer Packaged Goods</a></span>
		<span><a href="#nogo">Electric Power & Natural Gas</a></span>
        <span><a href="#nogo">Financial Services</a></span>
		<span><a href="#nogo">Healthcare Systems and Services</a></span>
		<span><a href="#nogo">High Tech</a></span>
        <span><a href="#nogo">Infrastructure</a></span>
		<span><a href="#nogo">Media & Entertainment</a></span>
	</ul>
</li>
<li><a href="#nogo">Training Courses</a>
	<ul>
		<span><a href="#nogo">In-house Training</a></span>
		<span><a href="#nogo">Class Schedule</a></span>
		<span><a href="#nogo">Special Training</a></span>
	</ul>
</li>
<li><a href="#nogo">Insights and Publications</a></li>

<li><a href="#nogo">Our People</a>
	<ul>
		<span><a href="#nogo">Firm Leadership</a></span>
		<span><a href="#nogo">Member Profiles</a></span>
	</ul>
</li>
</ul>
</div>

#button {
width: 296px;
height: 27px;
        padding: 0 0 1em 0;
        margin-bottom: 1em;
        font-family: Tahoma, Arial, sans-serif;
                /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
        font-size : 16px;
        background-color: #90bade;
        color: #333;
        }
		
#button, ul, li,li li{
margin: 0px;
padding: 0px;
}

#button ul {
        list-style: none;
        border: none;
		line-height: 35px;
		
				
                }
			
#button ul li a {
width: 294px;
height: 35px;
display: block;
text-decoration: none;
color: #FFFFFF;
padding-left: 20px;

}

.submenu{
width: 100px;
background: #000000;

}

#button ul > li > ul {
width: 300px;
height: 300px;
position: absolute;
display: none;
left: -300px;
top: 0px;
background: #000000;
}

#button > ul > li:hover > ul {
	display: inline;
}



        #button li {
                border-bottom: 3px solid #FFFFFF;
                list-style: none;
                list-style-image: none;
position:relative;

                }


        #button li a {
                display: block;
                padding: 5px 5px 5px 0.5em;
               /* border-left: 10px solid #BF9F30;*/
               /* border-right: 10px solid #FFD440;*/
                background-color: #FFC900;
                color: #fff;
                text-decoration: none;
                width: 100%;
                }

        html>body #button li a {
                width: auto;
                }

        #button li a:hover {
                /*border-left: 10px solid #A67D00;
                border-right: 10px solid #FFDD73;*/
                background-color: #FFC000;
                color: #fff;
                }

				
/* HOVER */
#button li:hover {
                background-color: #FFC000;
}

#button ul li:hover ul li a:hover {
background-color: #FFC000;
}

#button a:hover {
font-weight: bold;
}