我一直在四处寻找解决方案但是我无法找到它。我正在帮助一个基于wordpress的网站，并引入了bootstrap并在菜单中添加了自定义css。问题是我无法将子菜单置于父li下面，这是此网站上唯一剩下的内容。
HTML
<nav id="main_navbar_container"class="navbar navbar-default ">
<div class="container">
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div id="main_logo_container" class="navbar-header"> <!--Main logo container-->
<div="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="brand_name_header" class="navbar-brand" href='http://localhost/wordpress/' title='FireSafe' rel='home'>
<div>
<img src='http://localhost/wordpress/wp-content/uploads/2015/05/11092946_10205134271130262_699861793_n.png'width="100px">
</div><!-- site-logo -->
</a>
</div><!--main logo container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="primary_menu"class="nav navbar-nav">
<div class="menu-home-screen-menu-container"><ul id="menu-home-screen-menu" class="menu"><li id="menu-item-126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-126"><a href="http://localhost/wordpress/about-us/">About us</a></li>
<li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="http://localhost/wordpress/recomendations/">Recommendations</a></li>
<li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="http://localhost/wordpress/gallery/">Gallery</a></li>
<li id="menu-item-346" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-346"><a href="http://www.google.com">Services</a>
<ul class="sub-menu">
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://localhost/wordpress/risk-assesment/">Risk Assesment</a></li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="http://localhost/wordpress/risk-management/">Risk Management</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://localhost/wordpress/fire-training/">Fire Training</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost/wordpress/fire-drills/">Fire Drills</a></li>
</ul>
</li>
<li id="menu-item-130" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-130"><a href="http://localhost/wordpress/fire-safety-equipment/">Fire Safety Equipment</a>
<ul class="sub-menu">
<li id="menu-item-131" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-131"><a href="http://localhost/wordpress/fire-blankets/">Fire blankets</a></li>
<li id="menu-item-132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a href="http://localhost/wordpress/fire-extinguishers/">Fire extinguishers</a></li>
<li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"><a href="http://localhost/wordpress/fire-alarms/">Fire alarms</a></li>
</ul>
</li>
<li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://localhost/wordpress/faqs/">FAQs</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-20 current_page_item menu-item-33"><a href="http://localhost/wordpress/contact-us/">Contact Us</a></li>
</ul></div> </ul>
</div>
</div>
</div>
</nav>
CSS：
#main_navbar_container{
margin-bottom:0;
background:white;
}
.navbar-collapse {
text-align:center;
}
.navbar-nav {
display:inline-block;
float:none;
}
/*
#brand_name_header{
float: left;
padding: 15px;
text-align: center;
width: 100%;
}
#brand_name_header a{
float:none;
}*/
#primary_menu a:visited,
#primary_menu a:link,
#primary_menu a:hover{
color:#ea474b;
}
#primary_menu{
display:block;
float:right;
}
#primary_menu li{
list-style:none;
float:left;
padding:15px 5px;
min-width:100px;
position:relative;
}
#primary_menu li:last-of-type{
border-right: none;
}
#primary_menu a{
font-weight:600;
height:100%;
width:100%;
}
#primary_menu li:hover a{
color:#CF000F;
text-decoration: none;
}
/*Hover effect*/
#primary_menu ul li:hover{
background-color:rgba(253, 227, 167,1);;
}
#primary_menu ul li:hover ul{
display:block;
position:absolute;
z-index:1;
background-color:white;
margin:auto;
width:200px;
top:100%;
}
#primary_menu ul li:hover ul li{
float:left;
width:100%;
position:relative;
}
#primary_menu ul li:hover a{
color:#ea474b;
}
#primary_menu ul li:active{
background-color:black;
}
/*Sub menu*/
.sub-menu{
display: none;
}
.sub-menu li:hover{
background-color:rgba(253, 227, 167,1);
}
@media (max-width: 1200px){
#primary_menu{
width:100%;
margin:0;
}
#primary_menu li{
width:100%;
margin:5px 0 0 0;
}
#primary_menu ul li:hover{
background:none;
}
#primary_menu ul li:hover a{
font-color:black;
/*\color:rgb(207,0,15);*/
}
#primary_menu ul li:hover ul{
position:initial;
background-color:rgb(238,238,238);
width:100%;
padding:0;
margin:0;
}
#primary_menu ul li:hover li:first-of-type{
border-top:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover li:last-of-type{
border-bottom:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover a:link,
#primary_menu ul li:hover a:visited{
color:#ea474b;
}
#primary_menu li{
/*border-bottom:1px solid rgb(238, 238, 238);*/
}
#menu-home-screen-menu{
margin-left:0;
}
}
可在以下位置找到此示例：fiddle
非常感谢帮助。
提前致谢， Ĵ