It seems to work ok and you have a click menu for smaller screen which is good.
There are issues (as there are will all drop down) in that you have provided no keyboard navigation for the menu. I could not use the menu as I use the keyboard a lot. People without a mouse or touch cannot use the site at all.
You could implement some basic keyboard accessibility for modern browsers by simply using focus-within.
e.g.
nav li:focus-within > ul{
display:block
}
That will open the menu when an anchor is tabbed to. You would also need to provide some clue that elements have been focussed as your whole top menu has no focus styles appearing.
The other issue is that you don’t actually do any touch detection (as far as I could see on first glimpse) but you go from a hover menu to a click menu at about 1031px but I believe there are tablets larger than that (especially if in landscape mode). (It may be that the tablets may still work (after a fashion) as some tablets treat a hover as a first touch and may indeed show the menu but won’t hide it until something else has focus. You would need to test this for yourself as I don’t have any large tablets to test.)
On my iphone the menu with all its levels open is miles too long and unwieldy. Its structure doesn’t make it easy to work out which is sub menu item or not as some sub sub menus have the same styling as the default menu. You may need to style the mobile view more subtly and with each level more obvious that it is a sub level.
Do you need to have so many items in your menu? Do you have sub navigation on other pages? It might be that you can reduce the number of items with a bit of planning.
Of course the last comments are really a design and usability question but the menu does seem to be working ok.
As @Gandalf said the html errors are pretty self explanatory but if you need clarification then be more specific and we’ll try to help.
Yes you can add that and it will allow some basic keyboard navigation.
Apart from the comments already mentioned it is working ok.
Fully accessible, hover / touch friendly / keyboard navigation dropdown menus are few and far between. You’ll most likely exchange one set of problems for another.
That’s why I prefer a click menu for all devices and not rely on hover effects.
You will get errors on all the angular stuff like ng-app and any non standard attributes in the html.
Error : Attribute ng-app not allowed on element body at this point.
If you want them to validate you need to use data- prefixes to your custom attributes. I believe angular allows this. e.g. data-ng-app.
However although the custom attributes throw an error it is unlikely that they will do any harm unless they clash with someone else’s custom attributes.
Which makes sense because float only works on block elements, so it’s simply saying the inline-block is being ignored and the object is being used as a display: block instead. Take off the display:inline-block out of the css, and the line in the html should go away as well.