Responsive drop downs not activating until resize

Question

So I have tried to setup a responsive menu using the code here http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html

The problem I'm having is that the js seems to only activate when I resize the browser otherwise the larger version does not show the sub menu li when hovering and the smaller version has the li showing without clicking them first.

JS

var ww = '100%';

$(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');
        });
    }
}

CSS

body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
    width: 90%;
    max-width: 900px;
    margin: 10px auto;
}
.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#175e4c;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
}
.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: #1d7a62;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
}
.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}

@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;
    }

}

HTML

    <div class="container"> 
    <a class="toggleMenu" href="#">Menu</a>
    <ul class="nav">
        <li>
            <a href="#">Shoes</a>
            <ul>
                <li>
                    <a href="#">Womens</a>
                    <ul>
                        <li><a href="#">Sandals</a></li>
                        <li><a href="#">Sneakers</a></li>
                        <li><a href="#">Wedges</a></li>
                        <li><a href="#">Heels</a></li>
                        <li><a href="#">Loafers</a></li>
                        <li><a href="#">Flats</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Mens</a>
                    <ul>
                        <li><a href="#">Loafers</a></li>
                        <li><a href="#">Sneakers</a></li>
                        <li><a href="#">Formal</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Shirts</a>
            <ul>
                <li>
                    <a href="#">Mens</a>
                    <ul>
                        <li><a href="#">T-Shirts</a></li>
                        <li><a href="#">Dress Shirts</a></li>
                        <li><a href="#">Tank Tops</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Womens</a>
                    <ul>
                        <li><a href="#">T-Shirts</a></li>
                        <li><a href="#">Blouses</a></li>
                        <li><a href="#">Dress Shirts</a></li>
                        <li><a href="#">Tunics</a></li>
                        <li><a href="#">Camisoles</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Pants</a>
            <ul>
                <li>
                    <a href="#">Mens</a>
                    <ul>
                        <li><a href="#">Trousers</a></li>
                        <li><a href="#">Slacks</a></li>
                        <li><a href="#">Jeans</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Womens</a>
                    <ul>
                        <li><a href="#">Trousers</a></li>
                        <li><a href="#">Slacks</a></li>
                        <li><a href="#">Jeans</a></li>
                        <li><a href="#">Leggings</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Skirts</a>
            <ul>
                <li>
                    <a href="#">Long</a>
                    <ul>
                        <li><a href="#">Denim</a></li>
                        <li><a href="#">Knits</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Short</a>
                    <ul>
                        <li><a href="#">Denim</a></li>
                        <li><a href="#">Knits</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Mini</a>
                    <ul>
                        <li><a href="#">Denim</a></li>
                        <li><a href="#">Knits</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Dresses</a>
            <ul>
                <li>
                    <a href="#">Casual</a>
                </li>
                <li>
                    <a href="#">Formal</a>
                    <ul>
                        <li><a href="#">Wedding</a></li>
                        <li><a href="#">Party</a></li>
                    </ul>
                </li>

            </ul>
        </li>
        <li>
            <a href="#">Sweaters</a>
            <ul>
                <li>
                    <a href="#">Mens</a>
                    <ul>
                        <li><a href="#">Wool</a></li>
                        <li><a href="#">Knitwear</a></li>
                        <li><a href="#">Light Sweaters</a></li>
                        <li><a href="#">Cardigans</a></li>
                        <li><a href="#">Hoodies</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Womens</a>
                    <ul>
                        <li><a href="#">Wool</a></li>
                        <li><a href="#">Knitwear</a></li>
                        <li><a href="#">Light Sweaters</a></li>
                        <li><a href="#">Cardigans</a></li>
                        <li><a href="#">Hoodies</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Accessories</a>
            <ul>
                <li>
                    <a href="#">Womens</a>
                    <ul>
                        <li><a href="#">Belts</a></li>
                        <li><a href="#">Bags</a></li>
                        <li><a href="#">Jewelery</a></li>
                        <li><a href="#">Hats</a></li>
                        <li><a href="#">Eyewear</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Mens</a>
                    <ul>
                        <li><a href="#">Belts</a></li>
                        <li><a href="#">Hats</a></li>
                        <li><a href="#">Eyewear</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Outerwear</a>
            <ul>
                <li>
                    <a href="#">Womens</a>
                    <ul>
                        <li><a href="#">Winter</a></li>
                        <li><a href="#">Spring/Fall</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Mens</a>
                    <ul>
                        <li><a href="#">Winter</a></li>
                        <li><a href="#">Spring/Fall</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Shipping Info</a>
        </li>
    </ul>
    </div>

Answer 1

The initial value of ww is '100%', which is a string. On $(document).ready you call the adjustMenu() method, which reads the value of ww. Both conditions (ww < 768 and ww >= 768) evaluate to false, so adjustMenu() does nothing on DOMready.

You can avoid this to call $(window).trigger('resize') instead of calling adjustMenu() in your $(document).ready(function() { ... } method so that ww has a numeric value:

$(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();
    });

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

    $(window).trigger('resize');
});