Question

所以我刚刚启动了我的新网站的母版页，我输入了一个下拉菜单，我通过从主页按钮中删除它来测试。图片如下：

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

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

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

网站下拉菜单的宽度问题

1 个答案: