The sub-menu is not appearing below the parent item as expected. I have tried removing and adding the 'absolute' property, but it doesn't seem to have any effect.
Check out the JS Fiddle for reference: http://jsfiddle.net/42qg5/
HTML Code Snippet:
<div id="menu">
<div class="container">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About SRJC</a>
</li>
<li><a href="#">Admission</a>
</li>
<li><a href="#">The SR Programmes</a>
</li>
<li><a href="#">CCAs</a>
</li>
<li><a href="#">Portals</a>
<ul class="submenu">
<li><a href="#">ASPIRE</a>
</li>
</ul>
</li>
<li><a href="#">Staff & Parents</a>
</li>
</ul>
</div>
</div>
CSS Code Snippet:
#menu ul li ul li {
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
margin: 0;
padding: 0;
border: none;
outline: none;
}