What mistakes do you think in the layout and how should they be corrected?

Question

css

Here's an example of a mockup menu
jsfiddle.net/3433o5yz/3
The bottom line is that - the edges stretch to full width, and the center is fixed, and the dropdown menu also stretches to full width with a fixed center. Menu with transparencies, because any other element can be located under it (part of a picture, maps, etc.)
I had to get out through the use of a table - the middle cell has a fixed width, and the extreme cells fill the entire width of the page. How to do it without a table? I don't know yet.
All background colors with transparencies. When you hover over a menu item, the background changes color. This should NOT mix colors.
The menu is laid out in blocks - just like that, that's not the point, you can also use the list. The essence of stretching edges and a translucent background.
In this example, all conditions are met. But it would be desirable to learn more beautiful decision, more "correct". Hear about mistakes and shortcomings. And your opinion on how you would do it.

Answer 1

a table in a div in which there are a bunch of divs? I have never seen such a thing.
In general, this is usually done by nesting ul and li.
And it is not necessary to give a class to each element, it is better to paint it in css from the parent.

Answer 2

0. This is not a responsive layout