父母李的中心ul子菜单

Question

我一直在四处寻找解决方案但是我无法找到它。我正在帮助一个基于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

非常感谢帮助。

提前致谢， Ĵ