How do I prevent the page from opening when opening a menu?

I have a css menu and I would like to open it without moving the rest of the page.

Here is the current fiddle: http://jsfiddle.net/50c1Lhe7/

Html

<div class="logo-container large-6 columns">
    <div class="large-3 columns">IMAGE</div>
    <div class="large-9 columns">
        <a href="/" rel="home">
            <h1 class="site-title">WORDS</h1>
            <div class="site-slogan">MORE WORDS</div>
        </a>
    </div>
</div>

<nav id="nav" role="navigation">
    <a href="#nav" title="Show navigation">☰ MAIN MENU</a>
    <a href="#" title="Hide navigation">☰ MAIN MENU</a>
    <ul id="main-menu" class="main-nav left">
        <li class="first leaf" title=""><a href="/" title="">Home</a></li>
        <li class="expanded has-dropdown" title=""><a href="/" title="">About</a> 
            <ul class="dropdown">
                <li class="expanded show-for-small"><a href="/" title="">About</a></li>
                <li class="first leaf"><a href="/">About</a></li>
                <li class="leaf" title=""><a href="/" title="">Our Team</a></li>
            </ul>
        </li>
        <li class="leaf" title=""><a href="/" title="">Publications</a></li>
        <li class="leaf" title=""><a href="/" title="">Events</a></li>
        <li class="leaf active" title=""><a href="/" title="" class="active">Blog</a></li>
        <li class="last leaf"><a href="/">Contact</a></li>
    </ul>
</nav>

      

        
        
        
      

    

SCSS

#nav{
    display: none;
    width: 45%;
    height: 55px;
    float: left;
    padding: 20px;
    #main-menu {
        ul { float: none; }
        li.expanded.show-for-small { display: none !important; }
    }
    #main-menu{
        margin-top: 21px;
        padding: 0;
        width: 100vw;
    }
}
#nav > a{
    display: none;
}
#nav li  {
    position: relative;
    list-style-type: none;
    padding-top: 15px;
}
#nav > ul{
    height: 3.75em;
}
#nav > ul > li {
    width: 25%;
    height: 100%;
    float: left;
}
#nav li ul{
    display: none;
    position: absolute;
    top: 100%;
}
#nav li:hover ul,
#nav li:focus ul { display: block; }
    #nav {
        position: relative;
        z-index: 999;
        display: block;
    }
    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type { display: block; }
    #nav > ul {
        height: auto;
        display: none;
        position: absolute;
    }
    #nav > ul { left: 0; }
    #nav:target > ul { display: block; }
    #nav > ul > li {
        width: 100%;
        float: none;
        padding: 10px 0 10px 20px;
        text-transform: uppercase;
        list-style-type: none;
    }
    #nav > ul > li.first.leaf.active { padding-top: 5px; }
    #nav li ul { position: static; }

      

        
        
        
      

    

Since the menu works by targeting the nav id, whenever the menu is clicked to open it, it drops to the navigation section. How can I change this so it can be clicked and opened without going to the section? If this can be made easier with javascript, please let me know.