CSS menu is being overlapped by text - html

Question

My css menu is being overlapped by my text at the bottom, this is causing the menu to be rendered useless as when you hover over it and initiate the drop down the text overlaps and the menu comes back up.
i would really appreciate the help with the coding. I am a absolute newbie. if there are changes to the code please could you tell me where to put them.
a link to the menu is at http://stock-trade-101.com/market-indicators/
css code
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 70px;
background-color: #232323;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #a0a0a0;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #cc2c24;
color: #f0f0f0;
}
HTML code for CSS menu
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='#'><span>Trending</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Support and Resisrance</span></a>
<ul>
<li><a href='#'><span>Creation of Support</span></a></li>
<li><a href='#'><span>Creation of Resistance</span></a></li>
<li><a href='#'><span>Broken Support Becoming Resistance</span></a></li>
<li><a href='#'><span>Broken Resistance Becoming Support</span></a></li>
<li class='last'><a href='#'><span>Significance of Support and Resistance</span></a></li>
</ul>
</li>
<li><a href='#'><span>Dow Theory</span></a></li>
<li><a href='#'><span>Channel Lines</span></a></li>
<li><a href='#'><span>Trendlines</span></a></li>
<li class='last'><a href='#'><span>Fan Principle</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Chart Patterns</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Head And Shoulders Pattern</span></a>
<ul>
<li><a href='#'><span>Formation In Bull Market</span></a></li>
<li class='last'><a href='#'><span>Formation in Bear Market</span></a></li>
</ul>
</li>
<li><a href='#'><span>Key Reversal</span></a></li>
<li class='has-sub'><a href='#'><span>Symmetrical Triangles</span></a>
<ul>
<li><a href='#'><span>Ascending Triangle</span></a></li>
<li class='last'><a href='#'><span>Descending Triangle</span></a></li>
</ul>
</li>
<li><a href='#'><span>Rectangles</span></a></li>
<li><a href='#'><span>Flags</span></a></li>
<li class='last'><a href='#'><span>Pennants</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='#'><span>Oscillators and indicators</span></a>
<ul>
<li><a href='#'><span>Leading and Lagging</span></a></li>
<li><a href='#'><span>RSI</span></a></li>
<li><a href='#'><span>Stochastic Oscillator </span></a></li>
<li class='last'><a href='#'><span>MACD</span></a></li>
</ul>
</li>
</ul>
</div>

Answer 1

Finally got it, the text had a z-index set on it, causing it to render above the menu.
Remove the following, and your problem is solved:
.sqs-block {
position: relative;
clear: both;
z-index: 1;
}