title: Width issue with website dropdown menu
body: <p>So ive just started the master page for my new site and i put in a dropdown menu which i tested out by dropping it from the home button. Image below:</p>
  
  <p><a href="http://prntscr.com/28qnk2" rel="nofollow">http://prntscr.com/28qnk2</a></p>
  
  <p>My problem occurs when i tried to apply the same code to my plugins button in the menu, the whole thing spaces out. Image below:</p>
  
  <p><a href="http://prntscr.com/28qpky" rel="nofollow">http://prntscr.com/28qpky</a></p>
  
  <p>This is the first time ive tried to build in a dropdown menu so my initial attempts probably have some issues with them but i cant seem to get this to work. Here is the code for the menu (html).</p>
  
  <pre><code>&lt;div id="menu"&gt;
                      &lt;table id="menu_table"&gt;
                      &lt;tr&gt;
  
                      &lt;td id="home" class="menu_item" style="position:relative; z-index: 1000"&gt;
                          &lt;ul class="dropdown"&gt;
                              &lt;li&gt;&lt;p&gt;Home&lt;/p&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;One&lt;/li&gt;
                                      &lt;li&gt;Two&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/td&gt;
  
                      &lt;td id="about_us" class="menu_item"&gt;About Us&lt;/td&gt;
  
                      &lt;td id="plugins" class="menu_item"&gt;
                          &lt;ul class="dropdown"&gt;
                              &lt;li&gt;&lt;p&gt;Plugins&lt;/p&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;One&lt;/li&gt;
                                      &lt;li&gt;Two&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/td&gt;
  
                      &lt;td id="tutorials" class="menu_item"&gt;Tutorials and Help&lt;/td&gt;
  
                      &lt;td id="staff" class="menu_item"&gt;Staff&lt;/td&gt;
  
                      &lt;td id="chat" class="menu_item"&gt;ChatRoom&lt;/td&gt;
  
                      &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the CSS for the menu:</p>
  
  <pre><code>#menu   {
      position:relative;
      float:right;
      margin:2px;
      margin-right:13%;
      width:52%;
      height:77px;
      }
  #menu_table{
      position:relative;
      top:12%;
      height:76%;
      width:100%;
      border-spacing:0px;
      }
  .menu_item:first-child{
      border-left:1px solid #40d7bc;
      }
  .menu_item:hover{
      background-color: black;
      color:#40d7bc;
      }
  .menu_item{
      border-right:1px solid #40d7bc;
      text-align:center;
      }
  ul.dropdown li ul { 
      display:none;
      position:absolute;
      z-index:100;
      padding-left:50%;
      top:35px;
      width:100%;
      }
  ul.dropdown li ul li {
      position:relative;
      border-top:30px solid black;
      left:-50%;
      background-color: black;
      }
  ul.dropdown li ul li:last-child {
      border-bottom:15px solid black;
      }
  .menu_item li {
      list-style-type: none;
      }
  </code></pre>
  
  <p>and finally the small bit of jQuery i used.</p>
  
  <pre><code>function() { 
      $('ul', this).stop(true, true).slideToggle(100); },
  function() { 
      $('ul', this).stop(true, true).slideToggle(100); }
  );
  </code></pre>
  
  <p>Thanks for any help on this, im completely lost on whats wrong with it.</p>
  
  <p>The only idea i may have with what the issue is, is how i aligned the text to the center. I did it by padding the ul containing the submenus by 50% width, this way the left side of the ul was down the middle and when i shifted the submenu items left by 50% width they were in the middle. You're probably thinking why shift them at all, well for some reason if i left them in the middle it covered up part of the borders on the menu, screenshot:
  www.prntscr.com/28qwvv</p>
  
  <p>If I'm being an idiot and my question is stupid please feel free to point it out as long as you give me a reason</p>