javascript - 网站下拉菜单的宽度问题

Question

因此，我刚刚启动了我的新站点的母版页，并放入了一个下拉菜单，我通过将其从主页按钮中删除来进行测试。下图:

http://prntscr.com/28qnk2

当我尝试将相同的代码应用到菜单中的插件按钮时，我的问题出现了，整个事情都出现了空白。下图:

http://prntscr.com/28qpky

这是我第一次尝试在下拉菜单中构建，所以我最初的尝试可能有一些问题，但我似乎无法让它工作。这是菜单的代码 (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>

这是菜单的 CSS:

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

最后是我使用的一点点 jQuery。

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

感谢您对此提供的任何帮助，我完全不知道它出了什么问题。

我可能对问题的唯一想法是如何将文本对齐到中心。我通过将包含子菜单的 ul 填充 50% 宽度来做到这一点，这样 ul 的左侧位于中间，当我将子菜单项向左移动 50% 宽度时，它们位于中间。您可能在想为什么要移动它们，出于某种原因，如果我将它们留在中间，它会覆盖菜单上的部分边框，屏幕截图:www.prntscr.com/28qwvv

如果我是个白痴，我的问题很愚蠢，请随时指出，只要你给我一个理由

Answer 1

我注意到您正在应用相对于您的家庭 TD 的内联样式位置。删除内联样式并将其添加到您的 css。

.menu_item {
   position: relative;
}

这应该可以解决问题。相对元素将包含绝对元素，并且您似乎没有将其包含到插件宽度。请参阅我上面的评论。