Sorry, should have assumed. The site isn't yet live so here's the code:

HTML:

<div class="new-main-nav">

<a class="toggleMenu" href="#">Menu</a>

<ul class="nav">
    <li class="test"><a href="#">Home</a></li>
    <li><a href="#">Applications</a>
        <ul>
            <li><a href="#">Phone Manager</a></li>
            <li><a href="#">Phone Manager Mobile</a></li>
            <li><a href="#">Campaign Manager</a></li>
            <li><a href="#">Call Recorder</a></li>
            <li><a href="#">CRM Communicator</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Our Team</a></li>
        </ul>
    </li>
    <li><a href="#">Support</a>
        <ul>
            <li><a href="#">About Our Support</a></li>
            <li><a href="#">Remote Support</a></li>
            <li><a href="#">Documentation</a></li>
            <li><a href="#">Join Meeting</a></li>
            <li><a href="#">PCI Compliance</a></li>
        </ul>
    </li>
    <li class="test"><a href="#">Contact Us</a></li>
</ul>


</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

CSS:

.new-main-nav {
    width: 90%;
    max-width: 900px;
    margin: 10px auto;
}
.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 15px;
    color: #999;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#fff;
    border-radius:10px;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {
    padding: 10px 15px;
    color:#999;
    border-radius:10px;
}

.nav a:hover {
    background-color:#eeecec;
    color:#0099ff;
    border-radius:10px;
}

.nav li {
    position: relative;
}
.nav > li {
    float: left;
    border-top: 1px solid #104336;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #fff;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
}

.nav li li a:hover {
    background-color:#eeecec;
    color:#0099ff;
}

.nav li li li a {
    background:#fff;
    z-index:200;
    border-top: 1px solid #fff;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}

Javascript:

var ww = document.body.clientWidth;

$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();
})

$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});

var adjustMenu = function() {
    if (ww < 768) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww >= 768) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
        });
    }
}

Please ignore my last post. The link you posted had the solution. Thank you SOOOO much Steve. You're a life saver :)

Hi,

Yes - just tested it and it looks like you're javascript is running before the content is on the page so the client width is zero / null.

Where are you outputting that javascript on the page template? It's going to have to be below the line that adds JQuery which in self will have to be after all the HTML content (ideally just before the tag).

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

If you have a master template and you're looking to only add this code in teh child template then you can add a section below this line in the master template.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 @RenderSection("PageScripts", false)

And in your child template place this at the bottom with your page specific JS

   @section PageScripts
    {
       <script>
    var ww = document.body.clientWidth;

    $(document).ready(function() {
    .....
    // rest of your script

    </script>
    }

is working on a reply...