My friend asked me to create a website for him, and I'm having some trouble with the CSS for the menu bar. The design is looking good, but I’m facing a few issues.
1) I can't figure out how to make the menu stretch across the full width of the page. It should cover the entire width, split into 6 equal parts, with centralized text in each menu item that remains the same size while adding extra black background to fit the page width. (It's targeted for users with 1920 x 1080 resolution) Here’s an example of what I’m aiming for: [link]
2) Whenever I hover over the submenu items in the menu, the main menu readjusts itself. How can I prevent this from happening and keep the menu buttons at a static width? (i.e., 1/6th of the page)
3) Is there a way to set it up so that clicking on the main menu will display the relevant submenu and keep it open until another click is made elsewhere on the page (eliminating the need to hold the mouseover to select the submenu)?
HTML:
<!doctype html>
<html>
... (HTML code included)
</html>
CSS:
@import url("AEnigma_Scrawl/stylesheet.css");
... (CSS code included)