jQuery and developing the mobile dropdown - is this best practice?

I've just been reading into the code for the jQuery examples for creating the dropdown menu to appear when the browser window is smaller. I can see though that there may be a problem if for some reason your mobile or tablet has JavaScript disabled (please correct me if the following is not right though).

What I'm thinking - essentially because the JQuery is responsible for actually creating the navigation dropdown and filling it out with the hrefs and link text, but the CSS is responsible for showing and hiding it and the navigation menu, a user with their JS disabled using the site would not be able to see a menu at all on mobile, because the CSS would hide the navigation, but try to then show an element which doesn't exist because jQuery couldn't create it. This would stop them navigating your site.

Would it be better practice to have the select menu already setup with the HTML body and set it to display:none initially in the CSS, and then use a media query for showing and hiding them, without jQuery? Or would it be better to assume that most mobiles will have JS enabled and to not worry about that?

I know the focus has been on using jQuery and learning its functions (which is awesome, and really enjoying this as it's my first venture into jQuery), but just thought it was an interesting question as Andrew mentions that JS should be used to enhance the user experience but not be obtrusive, which it might be in this case?

This is the course I'm referring to: https://teamtreehouse.com/library/jquery-basics/creating-a-mobile-drop-down-menu/perfect

Any insight into this would be great, as I am still very much a front-end noob :)