title: CSS HTML dropdown menu not showing full text and text not aligned
body: <p>I have edited this post as it has partially solved my problem. However, i am faced with a new problem now and i do not wish to create a new question in case its deemed of spamming. currently, my add subject, drop subject, delete subject, manual crawl is not centralised even though i have specified it to be text-align center in #menu li li a. The sub menu's executive summary is also cut off. May I know how can i expand the submenu and centralise all my text?<br>Thank you!<br><br>
  Here is my code (i am really sorry because i do not have a jsfiddle acct and is on the waiting list):</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="menu"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" &gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" &gt;Executive Summary&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" &gt; Visual Analytics&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="#" &gt;Settings&lt;/a&gt;
          &lt;ul&gt;                                        
              &lt;li&gt;&lt;a href="#"&gt;Add Subject&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Delete Subject&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; Edit Subject&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="#" &gt;Manual Crawl&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" &gt;Executive Summary&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>​</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>     #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;
  }
  
  #menu ul {
      position: relative;
      list-style: none;
      display: inline-block;
      margin: 0;
      padding: 0;
  }
  
  #menu li {
      position: relative;
      float: left;
      height: 100%;
      padding: 0;
      line-height: 35px; 
  }
  
  #menu a {
      position: relative;
      height: 100%; 
      width: auto;
      float: left;
      text-decoration: none;
      padding: 0 0 0 25px; 
      margin: 0 3px;
      color: #fff;
      text-align: center;
  }
  
  #menu ul ul {
     display: none;
     width: 10em; /* Width to help Opera out */
     background-color: rgba(0,0,0,0.5);
  }
  
  #menu li:hover ul {
      display:block;
     position: absolute;
     top: 35px;
     left: 0;
     margin: 0;
     padding: 0;
     z-index: 1; 
  }
  
  #menu li li a{
      height: 35px; 
      width: 100%;
      float: left;
      text-decoration: none;
      padding: 0 0 0 25px; 
      margin: 0 3px;
      color: #fff;
      text-align: center;
  }
  
  #menu li li a:hover{
     background: rgba(255,255,255,0.5);
  }
  </code></pre>
  
  <p>​</p>