At the moment, I am facing an issue where my submenu items for Add Subject, Drop Subject, and Delete Subject are not centralized as intended. Additionally, the Executive Summary text in the submenu is getting cut off. Can someone please help me with expanding the submenu and centering all the text properly?
Unfortunately, I do not have a JSFiddle account at the moment, so here is the HTML and CSS code snippet:
HTML
<div id="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >Executive Summary</a></li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li><a href="#">Add Subject</a></li>
<li><a href="#">Delete Subject</a></li>
<li><a href="#"> Edit Subject</a></li>
<li><a href="#" >Manual Crawl</a></li>
<li><a href="#" >Executive Summary</a></li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}
/* CSS styles continue... */