nfc212

It seems it's the grey bottom footer causing it by having a margin-right value of -230px set in joomlaplates.css
.footer-outer { position: relative; z-index: 0; padding: 20px 0; color: #fff; margin-right: -230px; }

In the code for the section you have multiple unclosed <div class="row "> elements which are possibly due to a copy and paste error. If you remove all but the first of those the problem goes away.
<section class="processtree text-center"> <div class="container-fluid"> <div class="row "> <div class="col-lg-2 col-md-6 col-lg-offset-1"> <a href="#discovery"> <img src="img/discovery.png" alt="discovery"> <p>discovery</p> </a> </div> <div class="row "><!-- delete me --> <div class="col-lg-2 col-md-6"> <a href="#concept"> <img src="img/concept.png" alt="concept"> <p>concept</p> </a> </div> <div class="row "><!-- delete me --> <div class="col-lg-2 col-md-6"> <a href="#design"> <img src="img/design.png" alt="design"> <p>design</p> </a> </div> <div class="row "><!-- delete me --> <div class="col-lg-2 col-md-6"> <a href="#develop"> <img src="img/develop.png" alt="develop"> <p>develop</p> </a> </div> <div class="row "><!-- delete me --> <div class="col-lg-2 col-md-6"> <a href="#launch"> <img src="img/launch.png" alt="launch"> <p>launch</p> </a> </div> </div> </div> </section> You also have an issue with having two scroll bars, one on the page one in the browser.

In the example on jsfiddle putting the margin-top:-55px; on the nav ul li:Hover > ul will do it.
<nav> <ul> <li>Main 1 <ul> <li>Sub 1</li> <li>Sub 2</li> </ul> </li> </ul> </nav> and
nav ul { margin:0; padding:0; } nav li { list-style-type:none; display:block; width:150px; height:60px; text-align:center; line-height:55px; font-size:17px; font-family:Arial, Helvetica, sans-serif; } nav a { text-decoration:none; color:#000; } nav li:Hover { background-color:#CCC; } nav ul ul { display:none; } nav ul ul li{ background:red; } nav ul li:Hover > ul{ display:block; margin-left:150px; margin-top:-55px; }

HTML and CSS are the basic building blocks. You will certainly need a decent understanding of these
 
 
You will also require a grounding in Javascript. Don't bother with JAVA, it is a waste of f*cking time.
 
If using Wordpress you will also require a decent knowledge of PHP and MySQL
 
Also learning a bit of AJAX and XML wouldn't go amiss

Lots of ways you could do this. Here's two, there are as I say many more.
 
This uses inline image and applies an opacity change on hover:
 
 
<div class="social-links"> <a class="social-links-item" title="Twitter" href="http://twitter.com/"><img src="images/icons/twitter_32.png" alt="twitter icon" /></a> <a class="social-links-item" title="Facebook" href="http://www.facebook.com/"><img src="images/icons/facebook_32.png" alt="facebook icon" /></a> <a class="social-links-item" title="Youtube" href="http://www.linkedin.com/"><img src="images/icons/linkedin_32.png" alt="linkedin icon" /></a> <a class="social-links-item" title="Github" href="#nogo"><img src="images/icons/rss_32.png" alt="RSS icon" /></a> <a class="social-links-item" title="Google Groups" href="#nogo"><img src="images/icons/email_32.png" alt="email icon" /></a> </div> CSS:
 
 
.social-links{ float:right; width:230px; } .social-links-item { float:left; display: block; height: 32px; margin-left: 13px; width: 32px; } a img { border: none; outline:none; } .social-links-item img{ display:block; opacity: 0.6; transition: opacity 300ms ease-out 0s; } .social-links-item img:hover { opacity: 1; transition: opacity 300ms ease-out 0s; } The following method sets the images as backgrounds:
 
 
<div class="social-links"> <a class="social-links-item twitter-icon" title="Twitter" href="http://twitter.com/">Twitter</a> <a class="social-links-item facebook-icon" title="Facebook" href="http://www.facebook.com/">Facebook</a> <a class="social-links-item linkedin-icon" title="Youtube" href="http://www.linkedin.com/">LinkedIn</a> <a class="social-links-item rss-icon" title="Github" href="#nogo">RSS</a> <a class="social-links-item mail-icon" title="Google Groups" href="#nogo">Email</a> </div> CSS:
 
 
.social-links{ float:right; } .twitter-icon { background: url(images/icons/twitter_32.png)no-repeat top center; } .facebook-icon { background: url(images/icons/facebook_32.png)no-repeat top center; } .linkedin-icon { background: url(images/icons/linkedin_32.png)no-repeat top center; } .rss-icon { background: url(images/icons/rss_32.png)no-repeat top center; } .mail-icon { background: url(images/icons/email_32.png)no-repeat top center; } .social-links-item { display: inline-block; height: 32px; margin-left: 13px; opacity: 0.5; text-indent: -99999px; transition: opacity 300ms ease-out 0s; vertical-align: middle; width: 32px; } .social-links-item:hover { opacity: 1; transition: opacity 300ms ease-out 0s; } Note that no lists ordered, unordered or otherwise were used in the making of these.
 
Attached is a zip file which includes both methods and the some icons.
 
 
wdf-image-hover-effect.zip

Yes see it now.
 
Change the z-index from 2 to 20 in nav ul li ul in styles.css line 80
 
 
nav ul li ul { background: none repeat scroll 0 0 #000000; border-bottom: medium none; border-left: 1px solid #FFFFFF; border-radius: 0 0 5px 5px; border-right: 1px solid #FFFFFF; display: none; margin-top: 1px; max-width: 150px; position: absolute; z-index: 20; }