Pure css based :hover menues are not typically very user friendly even using a mouse. Since the as soon as the pointer is one pixel outside the menu, it's no longer hovered and disappears. This can be very annoying, especially for people with poor fine motor control.
I would suggest you use javascript to show and hide the sub menues, adding a delay so the menu does not disappear too fast if you just happen to move outside the menu for a moment (or use click activated and click hidden menu may be even better). Make sure that the menu is not hidden for users not using JavaScript (make submenus visible by default and hide them using javascript onLoad).
Edit 1: And of course you write the java script to respond both to click/hover and focus.
Edit 2:
If you design the page first to work without javascript or css selectors such as :hover, e.g. the menu and the sub-menus are visible all the time. Then add javascript that hides the submenu on document load, and toggles the sub-menus on click / on focus etc. It will automatically work for users not using javascript.
If the design does not work well with all the submenus visible (e.g. they are overlapping or something like this), you could also make a static version (the one visible without javascript) designed to work well even when fully visible, and replace it with a more complex javascript controlled menu when the javascript loads. Or you could let the top level menu items (those always visible in the dynamic version) links that send a query parameter to the server that toggle the specific menu item on and off serverside, and the javascript removes the href value from the links and adds listeners to open and close the submenus without the server roundtrip. It depends on how large the menus are what would be most sensible.
ulare not allowed inside inline elements likea. Other than that, you're right to use:focus.