Javascript 面包屑的定位不是'；不正确

我的网页上有菜单和面包屑。在我的菜单中，我有两个子菜单。在我的菜单中，我的菜单项是设计服务、设计手册、设计费用、关于我们、联系我们、设计资源、设计空缺和条款。 当我单击Design Services时，会出现一个下拉列表。在这个下拉列表中有平面设计、标志设计和网站设计。 当我点击徽标设计时，会出现一个下拉列表。在这个下拉列表中，我有企业标识设计、企业标识指南和固定费用标识设计

当我点击菜单项时，面包屑需要向下移动，当我点击菜单项使其消失时，面包屑需要向上移动

我的问题是，当我点击菜单项时，面包屑不会向下移动，菜单项最终与面包屑重叠

我的HTML代码是

 <!-- NAVIGATION SECTION -->
            <div class="navigation-wrapper overlay-bg border-bottom-white padding-level-one">
                <ul class="main-menu">
                    <li>
                        <a class="nav-active main-menu-sub" href="javascript:void(0);">Design services</a>
                            <div class="main-menu-sub-wrapper">
                                <div class="sub">
                                    <ul class="testing1">
                                        <li><a href="javascript:void(0);">graphic design</a></li>
                                        <li><span>/</span></li>
                                        <li><a class="main-menu-sub1" href="javascript:void(0);">Logo design</a>
                                            <div class="main-menu-sub-wrapper1">
                                                <div class="sub1">
                                                    <ul>
                                                        <li><a href="#">Corporate identity design</a></li>
                                                        <li><a href="#">Corporate identity guidelines</a></li>
                                                        <li><a href="#">Fixed fee logo design</a></li>   
                                                    </ul>
                                        </li>
                                        <li><span>/</span></li>
                                        <li><a href="#">Website Design</a></li>
                                    </ul>
                                 </div>
                            </div>
                        </li>
                        <li><a href="#">Design portfolio</a></li>
                        <li><a href="#">Design fees</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Contact us</a></li>
                        <li><a href="#">Design resources</a></li>
                        <li><a href="#">Design vacancies</a></li>
                        <li><a href="#">Terms</a></li>  
                        <li class="nav-arrow no-action">
                            <img src="images/nav-arrow-white.png" />
                        </li>
                        <div class="clearboth"></div>
                    </ul>
                    <div class="clearboth"></div>
            </div>


            <!-- END NAVIGATION SECTION -->
                    <!-- BREADCRUMBS SECTION -->
            <div class="breadcrumbs-wrapper overlay-bg border-bottom-white padding-level-one">
                <div class="breadcrumbs-inner-wrapper">
                    <a href="#">Home</a><span>></span>
                    <a href="#">Design Services</a><span>></span>
                    <a href="#">Logo design</a>
                    <div class="clearboth"></div>
                </div>
            </div>
            <!-- END BREADCRUMBS SECTION -->

我的css代码是

 .clearboth{
 clear:both;    
 float:none !important;
 display:block;
 height:0px;
 overflow:hidden;
 }

.nav-arrow{
  float:right !important;   
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  margin:5px 0 0 0;
  padding:10px 0;
}

.nav-arrow img{
display:block;  
}

.main-level-nav{
/*padding:10px 0;*/
position:relative;
}

.nav-active{
color:#43b6cf !important;
}
.overlay-bg{
background:url(../images/overlay-bg.png) top left repeat;   
}

 .border-bottom-white{
border-bottom:solid 1px #FFFFFF;
}

.padding-level-one{
padding:0 22px; 
}

.breadcrumbs-inner-wrapper{
padding:10px 0;
}

.breadcrumbs-wrapper a{
display:block;
float:left;
text-decoration:none;
color:#000000;
margin:0 10px 0 0;  
}

.breadcrumbs-wrapper a:hover{
color:#43b6cf;
}
.breadcrumbs-wrapper span{
display:block;
float:left;
margin:0 10px 0 0;
}

.breadcrumbs-wrapper{
}
.testing {

}

.main-menu ul{
  color: red !important;
 /*position: absolute;*/

}

.testing li {
list-style: none;
float: left;

}

.testing a:hover {
color: #43b6cf;
}

.testing a {
color: #000000;
text-decoration: none;
margin: 0 25px 0 0;
padding: 10px 0;
display: block;
}

ul {
  list-style:none;
  padding: 0;
  margin: 0;
}
li {
    display: inline-block;
    color: #000;
    cursor: pointer;
    margin-left:25px
}
.sub{
  position:absolute;
  padding-top: 5px;
  display:none
}

.sub1{
    position: absolute;
    padding-top: 5px;
    display: none;
}

---

编辑：多亏了Kishorevarma，我已经完成了我需要完成的一半。我仍然无法让第二个子菜单执行我希望它执行的操作。

从

中删除
位置：绝对
。主菜单ul

样式。

您需要在中使用clearfix类

 <div class="navigation-wrapper overlay-bg border-bottom-white padding-level-one main-menu clearfix">

---

阅读此内容以了解clearfix“”

如果我这样做，那么我的菜单就会变得有趣。这里有一个链接，看看当我删除位置时会发生什么：绝对点击设计服务。嗯。。。如果您将

位置：绝对

添加到

.main menu>ul>li

中，是否会有所帮助？并不是所有的东西最终都互相重叠，我已经尝试过了，但没有成功。我的菜单结果很搞笑。这里是一个链接，看看会发生什么[link]（jsfiddle.net/32j6Y/2/）点击设计服务，看看我的意思。他们添加了这个css。主菜单子包装器{position:absolute；}谢谢，这似乎可行，但现在当我点击菜单时，我的面包屑没有向下移动。我想这是你想要的，这应该是你的问题，这就是我想要的。我想知道你是怎么把面包屑弄下来的。我问这个问题的原因是因为我试图在第一个子菜单中创建另一个子菜单，子菜单项在面包屑上。面包屑位于顶部的原因是面包屑UL上的

位置：绝对
，但是如果没有一个工作的JSFIDLE，就不可能知道您遇到的确切问题，以及修复建议。我的JSFIDLE正在工作。当你点击链接时会发生什么？
 <div class="navigation-wrapper overlay-bg border-bottom-white padding-level-one main-menu clearfix">

 .clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-block; }
 /* start commented backslash hack \*/
  * html .clearfix { height: 1%; }
 .clearfix { display: block; }
 /* close commented backslash hack */