I attempted to center the menu items in CSS. The navigation bar spans the entire width of the screen, which is the desired outcome. However, I am struggling to get the menu items to be centered relative to the screen.
Below is the CSS code that I am currently using:
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
// rest of the CSS styles go here
}
Additionally, here is the HTML code that accompanies it:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="menu_assets/styles.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>
// HTML menu structure goes here
</div>
</head>
Any assistance on this matter would be highly appreciated.
EDIT: After implementing the suggested changes, I encountered another issue. When hovering over a "sub-menu" item, the "sub-sub menu" item displays with a gap between them, rendering them unclickable. Is there anything else that needs to be adjusted to resolve this?