Need a basic submenu for my CSS navigation - css

Question

So disregarding styling and everything else, all I would like is for a sub menu to appear for some of my navigation selections.
Right now I have a basic list that I made on my own using an online tutorial. Afterwards though, after searching through the web, I still have not found a submenu navigation that is close to my code or understanding.
This is my html code:
<div class="navigation">
<li>
<h2>Services</h2>
</li>
<li>
<h2>Store</h2> </l
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</li>
</nav>
</div>
<div class="navigation blue">
<li>
<a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
<h2>Facebook</h2>
</a></li></div><a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
</a>
<div class="navigation orange">
<li>
<a href="http://www.bing.com/maps/default.aspx?v=2&pc=FACEBK&mid=8100&rtp=adr.~pos.35.195859_-106.672877_Argano+Computer+Services_10009+Clearwater+Court%2C+Albuquerque%2C+New+Mexico&cp=35.195859~-106.672877&lvl=16&sty=r&rtop=0~0~0~&mode=D&FORM=FBKPL1&mkt=en-US" target="_blank">
<h2>Locate</h2>
</a>
</li>
</div>
<div class="navigation green">
<li>
<h2>Feedback</h2>
</li>
</div>
<div class="navigation purple">
<li>
<h2>About</h2>
</li>
</div>
</div>
</div>
this is my css:
<div class="navigation">
<li>
<h2>Services</h2>
</li>
<li>
<h2>Store</h2> </l
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</li>
</nav>
</div>
<div class="navigation blue">
<li>
<a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
<h2>Facebook</h2>
</a></li></div><a href="https://www.facebook.com/pages/Argano-Computer-Services/268377233227887?fref=ts">
</a>
<div class="navigation orange">
<li>
<a href="http://www.bing.com/maps/default.aspx?v=2&pc=FACEBK&mid=8100&rtp=adr.~pos.35.195859_-106.672877_Argano+Computer+Services_10009+Clearwater+Court%2C+Albuquerque%2C+New+Mexico&cp=35.195859~-106.672877&lvl=16&sty=r&rtop=0~0~0~&mode=D&FORM=FBKPL1&mkt=en-US" target="_blank">
<h2>Locate</h2>
</a>
</li>
</div>
<div class="navigation green">
<li>
<h2>Feedback</h2>
</li>
</div>
<div class="navigation purple">
<li>
<h2>About</h2>
</li>
</div>
</div>
</div>
any suggestions?

Answer 1

Simple submenu for you:
<ul id="submenu">
<li>Home</li>
<li>About</li>
<li>Team</li>
</ul>
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
}
#submenu {
width: 200px;
background: #eee;
padding: 10px;
}
#submenu li{
margin: 0;
margin-bottom: 10px;
position: relative;
text-align: center;
font-weight: bold;
color: #fff !important;
line-height: 1 !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
white-space: nowrap;
border: none;
cursor: pointer;
display: inline-block;
vertical-align: middle;
zoom: 1;
border-radius: 3px;
-webkit-font-smoothing: antialiased;
background-color: #77cc6d;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
font-size: 15px;
padding: 12px 12px 12px 12px;
box-shadow: 0 3px 0 0 #53994b;
width: 100%;
}
#submenu li:active, #submenu li:focus{
box-shadow: 0 1px 0 0 #53994b;
top: 2px;
}
#submenu li:last-child{
margin-bottom: 0px;
}
</style>
JSFiddle: http://jsfiddle.net/aLggP/1/