Generic Theme Submenu Issue

This is by design. Generic is meant to be very simple and lightweight.

Here’s something a bit more advanced for you to give a try:

#menu{clear:both}
#menu ul, #menu ul li{display:inline}
#menu ul li a{display:inline-block;font-family:'lucida grande',helvetica,arial,verdana,sans-serif;font-size:16px;color:#777;line-height:51px;text-decoration:none;padding:0 20px}
#menu ul li a:hover{color:#777;text-decoration:none;background:#eee}
#menu .current-menu-item a, #menu .current_page_item a{color:#aaa}
#menu .current-menu-item .sub-menu a, #menu .current_page_item .children a{color:#777}
#menu ul > li:first-child a:hover{border-radius:0}
#menu .sub-menu li a, #menu .children li a{line-height:14px !important;padding:8px 14px !important;border-radius:0 !important}
#menu li .sub-menu, #menu li .children{margin-left:-1px}
#menu ul li{position:relative}
#menu li ul{display:none;position:absolute;top:35.5px;left:0}
#menu li ul a{background:#eee}
#menu ul ul li:hover ul, #menu ul ul ul li:hover ul{top:29px;left:0;margin:-34px 0 11px 200px}
#menu ul li:hover ul{display:inline-block}
#menu ul ul, #menu ul li:hover ul ul, #menu ul ul li:hover ul ul{display:none}
#menu ul li:hover ul, #menu ul ul li:hover ul, #menu ul ul ul li:hover ul{display:block;z-index:2147483647}
#menu ul li:hover ul li a, #menu ul ul li:hover ul li a, #menu ul ul ul li:hover ul li a{font-size:13px;line-height:30px;width:200px;padding:0 14px;margin:-1px 0 0}
#menu ul li:hover ul li a{}
#menu ul ul li:hover ul li a{}
#menu ul ul ul li:hover ul li a{}
#menu ul li:hover ul li a:hover, #menu ul ul li:hover ul li a:hover,#menu ul ul ul li:hover ul li a:hover{background:#eee;opacity:1}
#menu .toggle{display:none;color:#000;text-align:center;line-height:51px}

@media all and (max-width:767px){#menu label.toggle{display:block}#menu ul{display:none}#menu input.toggle:checked + div > ul{display:block}#menu input.toggle:checked + div > ul li a{display:inline-block;box-sizing:border-box;width:100%;border-right:none}#menu .sub-menu, #menu .children{position:absolute;width:180px;left:100%;margin-top:0;margin-left:-180px !important}#menu ul li:hover ul ul, #menu ul ul li:hover ul ul{top:26px;margin:0 !important}#menu .sub-menu a, #menu .children a{width:180px !important}}

And you’ll want to remove the stuff related to #menu from @media all and (max-width:768px){} as well.

If you’re not looking to dig around in code, a quick and dirty solution might be to just install a plugin to handle it for you:

https://wordpress.org/plugins/responsive-menu/

Thanks

I tested the code above and it works as-is, but it looks like you’ve already customized your menu a great deal, which makes it very difficult for me to trace what’s been changed and what remains the same in order to adjust.

I’d need to get in there and see your code first-hand. Normally, I’d just use Firebug, but when it comes to dropdown menus and all the layers and hover and click effects, it makes it difficult. And I couldn’t really spend time “getting in there” unless you were paying me.

So, I’d recommend just replacing the whole menu with https://wordpress.org/plugins/responsive-menu/ and then re-customize the look.