Question

我似乎无法弄清楚为什么我的菜单在子下拉菜单上没有正确对齐。它们显示在其父单元格的下边缘，这使得尝试浏览它们几乎是不可能的。您必须向右斜下方才能进入下一个菜单。 http://imgur.com/zxWcmZf“菜单截图”

我已经发布了下面的菜单代码，对于我缺少的东西，任何人都能突出什么吗？这是我第一次使用bootstrap。万分感谢每个人的帮助。

<div class="navbar-wrapper">
    <div class="container">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="buttons-container">
                </div>
                <ul class="blue nav" id="css3-menu">
                    <li><a href="index.php">Home</a> </li>
                    <li class="dropdown"><a tabindex="-1" class="dropdown-toggle_" data-toggle="dropdown"
                        href="">Choice 1</a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-submenu"><a tabindex="-1" href="#">Choice 1a</a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-submenu"><a href="#">Choice 1a1</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="">Choice 1a1a</a></li>
                                            <li><a tabindex="-1" href="">Choice 1a1b</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu"><a href="#">Choice 1a2</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="">Choice 1a2a</a></li>
                                            <li><a tabindex="-1" href="">Choice 1a2b</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown"><a href="#">Choice 1b</a> </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown"><a class="dropdown-toggle_" data-toggle="dropdown" href="">Choice
                        2</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Choice 2a</a></li>
                            <li><a href="">Choice 2b</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a class="dropdown-toggle_" data-toggle="dropdown" href="">Choice
                        3</a>
                        <ul class="dropdown-menu">
                            <li><a href="">Choice 3a</a></li>
                            <li><a href="">Choice 3b</a></li>
                        </ul>
                    </li>
                    <li><a href="">Choice 4</a> </li>
                    <li><a href="">Choice 5</a> </li>
                </ul>
            </div>
        </div>
    </div>
</div>

编辑：对不起，我忘了CSS不知道我在想什么。这是与之相关的CSS。感谢您到目前为止的输入：）

/* css3 menu */
ul#css3-menu{
    width: 940px;
    min-width: 940px;
    margin: 0 auto;
    list-style: none;
    font-family: 'Open Sans', Arial, "MS Trebuchet", sans-serif;
    height: 46px;
    padding: 0;
}

ul#css3-menu > li{
    display: block;
    float: left;
    -webkit-transition: background .4s linear;
    -moz-transition: background .4s linear;
    -ms-transition: background .4s linear;
    -o-transition: background .4s linear;
    transition: background .4s linear;

    <!--[if IE]>
    position: relative;
    <![endif]-->
}

ul#css3-menu > li:first-child{
    border-left: none !important;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;

    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;

    -ms-border-top-left-radius: 4px;
    -ms-border-bottom-left-radius: 4px;

    -o-border-top-left-radius: 4px;
    -o-border-bottom-left-radius: 4px;

    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

ul#css3-menu > li:last-child{
    border-right: none !important;
}


ul#css3-menu > li > a{
    display: block;
    padding: 15px 30px;
    color: white;
    text-decoration: none;
    font-weight: 600;
        font-weight: bold;
}

/*
ul#css3-menu > li:hover > div{
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    -o-transform: translateY(-80px);
    transform: translateY(-80px);

}
*/
/*visibility: visible;*/

ul#css3-menu > li > div{
    -webkit-transition: -webkit-transform .2s linear;
    -moz-transition: -moz-transform .2s linear;
    -ms-transition: -ms-transform .2s linear;
    -o-transition: -o-transform .2s linear;
    transition: transform .2s linear;
    text-align: center;
    margin: 0 auto;
    -webkit-transform: translateY(-60px);
    -moz-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    -o-transform: translateY(-60px);
    transform: translateY(-60px);
    width: 37px;
    height: 37px;
    /*visibility: hidden;*/
    margin-bottom: -37px;
    z-index: -1;

    <!--[if IE]>
    margin-top: -60px;
    <![endif]-->

}


ul#css3-menu.blue > li > div{
    background: url(../img/icons-blue.png) 0 0 no-repeat;
}

.navbar-wrapper {
    background: #2773AE;
    background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true);
    box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
    -webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
    -moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
}
ul#css3-menu.blue{
    background: #2773AE;
    background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true);
    box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
    -webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
    -moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
}

ul#css3-menu.blue > li{
    border-right: 1px #074979 solid;
    border-left: 1px #3e92d0 solid;
        height: 46px;
}

ul#css3-menu.blue > li:hover{
    background: #074979;
}

Answer 1

这是你的附加CSS文件（你没有发布）导致这个，而不是你发布的html，也没有任何bootstrap css文件。当我测试你发布的html（我下面的整个html文件）时，我得到的下拉列表按预期方式对齐：http://imgur.com/XyYV5pE。

您可能希望发布您所包含的CSS，以便人们可以查看可能导致此问题的原因 - 或者将CSS简化为骨骼并逐个添加每个部分以追踪罪魁祸首。

<!DOCTYPE html>
 <html lang="en">

 <head>
     <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/>
     <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css"/>
     <script src="http://code.jquery.com/jquery.min.js"></script>
     <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
 </head>

 <body>
 <!--your exact markup posted in its entirety, unaltered, here--> 
 </body>

bootstrap下拉菜单未对齐

1 个答案: