CSS Bootstrap下拉菜单(CSS Bootstrap Dropdown Menu)

 我在我的网站上使用Bootstrap。 我想创建一个菜单下拉列表。 我已经成功创建了一个下拉菜单，但是当我在下拉菜单中添加更多项目时，它们只是重叠。 
 
 这是我的HTML 
 
                     <li>
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" >
                              Education<span class="caret"></span>
                          </a>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">Biology </a>
                          </ul>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">World History </a>
                          </ul>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">English </a>
                          </ul>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">Spanish </a>
                          </ul>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">Psychology </a>
                          </ul>
                      </li>
 
 和CSS 
 
                            <style>
                        .dropdown-menu {
                            position: absolute;
                            top: 100%;
                            left: 5px;
                            margin: 8px 22px 8px 22px;
                            z-index: 1000;
                            display: none;
                            float: left;
                            min-width: 160px;
                            /*padding: 5px 0;*/
                            padding-left: 10px;
                            margin: 2px 0 0;
                            font-size: 14px;
                            text-align: right;
                            color:white;
                            list-style: none;
                            background-color: #fff; /* here */
                            -webkit-background-clip: padding-box;
                            background-clip: padding-box;
                            border: 0px solid #ccc;
                            border: 0px solid rgba(0,0,0,.15);
                            border-radius: 0px;
                            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
                            box-shadow: 0 0px 0px rgba(0,0,0,.175);
                        }
                        .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
                            background-color: transparent;
                        }
                        .dropdown-menu-item{
                            color:white;
                            background-color:rgba(255, 255, 255, 0);
                        }

                        </style>
 
 这些都在HTML中，因此CSS不受HTML之外的任何其他CSS的影响。 
 
 目前工作下拉，但它超过圈我认为我缺少一部分CSS，如= display：block; 
 
 我花了几天时间玩弄一切，这段代码是我得到的最接近的代码。 如果这里没有足够的信息，请告诉我，我会在一天内提供更多详细信息和证据。 
 
 非常感谢你的时间，即使你无法帮助。 对此，我真的非常感激。 
 
 您可以在Lukebone.com上查看整个项目 

I'm using Bootstrap for my website. I want to create a menu dropdown. I have successfully created a dropdown menu, but when I add more items to the dropdown menu, they just overlap. 
 
Here is my HTML
 
                     <li>
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" >
                              Education<span class="caret"></span>
                          </a>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">Biology </a>
                          </ul>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">World History </a>
                          </ul>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">English </a>
                          </ul>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">Spanish </a>
                          </ul>
                          <ul class="nav navbar-nav dropdown-menu dropdown-menu-item">
                              <a href="signout.php">Psychology </a>
                          </ul>
                      </li>
 
and CSS
 
                            <style>
                        .dropdown-menu {
                            position: absolute;
                            top: 100%;
                            left: 5px;
                            margin: 8px 22px 8px 22px;
                            z-index: 1000;
                            display: none;
                            float: left;
                            min-width: 160px;
                            /*padding: 5px 0;*/
                            padding-left: 10px;
                            margin: 2px 0 0;
                            font-size: 14px;
                            text-align: right;
                            color:white;
                            list-style: none;
                            background-color: #fff; /* here */
                            -webkit-background-clip: padding-box;
                            background-clip: padding-box;
                            border: 0px solid #ccc;
                            border: 0px solid rgba(0,0,0,.15);
                            border-radius: 0px;
                            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
                            box-shadow: 0 0px 0px rgba(0,0,0,.175);
                        }
                        .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
                            background-color: transparent;
                        }
                        .dropdown-menu-item{
                            color:white;
                            background-color:rgba(255, 255, 255, 0);
                        }

                        </style>
 
These are both in the HTML, so the CSS is not influenced by any other css outside of the HTML. 
 
currently working dropdown, but it over laps I think i'm missing a section of CSS, something like= display:block;
 
I have spent a few days playing around with everything, and this code is the closest I have gotten. If there is not enough information here, please let me know and I will give more detail and evidence within a day. 
 
Thank you so much for your time, even if you can't help. I really appreciate it. 
 
You can view the entire project at Lukebone.com

原文：https://stackoverflow.com/questions/37127041