title: How to fix this Submenu on my nav?
body: <p>Little bit frustrating because I am having a hard time on doing this thing. I don't know how to fix this.
  On my about button there should be a submenu that "asdas" and the other one.
  That will be only appear when the hover is on about link.
  <a href="http://i57.tinypic.com/15cjbpg.png" rel="nofollow">Here is the sample pic of that</a></p>
  
  <p>CSS</p>
  
  <pre><code>.mainNavWrapper{
    position: absolute;
    width: 100%;
    height: 290px;
    background: rgba(0,0,0,0.7);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#46000000', endColorstr='#46000000');
    bottom: 195px;
    text-align: center; }
  
  
  .ie8 .mainNavWrapper{
   min-width: 1000px;
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#60000000', endColorstr='#60000000');}
  
  .mainnav form{
   display:none;}
  
  .mainnav form select{
   padding: 5px 10px 5px 10px;
   margin-top: 55px;}
  
  
   .mainnav ul{
    position: relative;
    margin: 0 auto;
    margin-top: 59px;
    margin-bottom: 43px;
    z-index:1; }
  
   .mainnav ul li{
    display: inline;
    font-size: 22px;
    margin-left: 17px;
    font-family: 'Oswald', sans-serif;}
  
   .mainnav ul li:first-child{
    margin-left: 0;}
  
   .mainnav a, .mainnav a:visited{
   color: #fff;}
  
  .mainnav a:hover, .mainnav a.selected { 
  text-decoration: none;}
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav class="mainnav" data-smallmenubgcolour="#777"&gt;
                       &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#home"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#about"&gt;ABOUT&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;ABOUT1&lt;/li&gt;
                            &lt;li&gt;ABOUT2&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#credo"&gt;CREDO&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#philosophy"&gt;PHILOSOPHY&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#portfolio"&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#services"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#news"&gt;NEWS&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
  &lt;/nav
  </code></pre>