Width issue with website dropdown menu

Question

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:

http://prntscr.com/28qnk2

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:

http://prntscr.com/28qpky

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).

<div id="menu">
                    <table id="menu_table">
                    <tr>

                    <td id="home" class="menu_item" style="position:relative; z-index: 1000">
                        <ul class="dropdown">
                            <li><p>Home</p>
                                <ul>
                                    <li>One</li>
                                    <li>Two</li>
                                </ul>
                            </li>
                        </ul>
                    </td>

                    <td id="about_us" class="menu_item">About Us</td>

                    <td id="plugins" class="menu_item">
                        <ul class="dropdown">
                            <li><p>Plugins</p>
                                <ul>
                                    <li>One</li>
                                    <li>Two</li>
                                </ul>
                            </li>
                        </ul>
                    </td>

                    <td id="tutorials" class="menu_item">Tutorials and Help</td>

                    <td id="staff" class="menu_item">Staff</td>

                    <td id="chat" class="menu_item">ChatRoom</td>

                    </tr>
                    </table>
                </div>

and here is the CSS for the menu:

#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;
    }

and finally the small bit of jQuery i used.

function() { 
    $('ul', this).stop(true, true).slideToggle(100); },
function() { 
    $('ul', this).stop(true, true).slideToggle(100); }
);

Thanks for any help on this, im completely lost on whats wrong with it.

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

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

Answer 1

I noticed that you are applying an inline style position relative to your home TD.. Remove the inline style and add this to your css.

.menu_item {
   position: relative;
}

This should do the trick. Relative elements will contain absolute elements, and it appears that you are not containing it to the plugin width. See my comments above.