面包屑的定位不正确

Question

在我的网页上，我有一个菜单和面包屑。在我的菜单中，我有 2 个子菜单。在我的菜单中，我的菜单项是设计服务、设计组合、设计费用、关于我们、联系我们、设计资源、设计空缺和条款。 当我单击设计服务时，会出现一个下拉菜单。在那个下拉菜单中有平面设计、标志设计和网站设计。 当我点击 Logo Design 时，会出现一个下拉菜单。在该下拉菜单中，我有企业形象设计、企业形象指南和固定费用标志设计。

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

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

我的 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 -->

我的 jquery 代码是

$(document).ready(function(e) {


$(".main-level-nav li").hover(function(){
    if($(this).hasClass("no-action")) return false;
    $(".main-level-nav").find(".nav-arrow img").attr("src","images/nav-arrow-blue-one.png");
    $(".main-level-nav").find(".nav-arrow").addClass("active");
    $(".main-level-nav").find(".nav-arrow").removeClass("inactive");

},function(){
    $(".main-level-nav").find(".nav-arrow img").attr("src","images/nav-arrow-white.png");
    $(".main-level-nav").find(".nav-arrow").addClass("inactive");
    $(".main-level-nav").find(".nav-arrow").removeClass("active");

});
$(".social-icons-wrapper .twitter-div").hover(function(){
    $(".social-icons-wrapper").find(".nav-arrow img").attr("src","images/nav-arrow-blue-one.png");
    $(".social-icons-wrapper").find(".nav-arrow").addClass("active");
    $(".social-icons-wrapper").find(".nav-arrow").removeClass("inactive");
    $(".twitter-feed").stop().slideToggle( 250 );
},function(){
    $(".social-icons-wrapper").find(".nav-arrow img").attr("src","images/nav-arrow-white.png");
    $(".social-icons-wrapper").find(".nav-arrow").addClass("inactive");
    $(".social-icons-wrapper").find(".nav-arrow").removeClass("active");
    $(".twitter-feed").stop().slideToggle( 250 );
});

$(".additional-navigation a").hover(function(){
    if($(this).hasClass("active")) return false;
    $(this).find(".nav-arrow").attr("src","images/nav-arrow-blue-one.png");
    //$(".additional-navigation").find(".nav-arrow").addClass("active");
    //$(".additional-navigation").find(".nav-arrow").removeClass("inactive");
    //$(".twitter-feed").slideDown(200);
},function(){
    if($(this).hasClass("active")) return false;
    $(this).find(".nav-arrow").attr("src","images/nav-arrow-white.png");
    //$(".additional-navigation").find(".nav-arrow").addClass("inactive");
    //$(".additional-navigation").find(".nav-arrow").removeClass("active");
    //$(".twitter-feed").slideUp(200);
});

$(".contact-details-onpage").click(function(){
    if($(".contact-details-onpage-inner").css("display") == "block"){
        $(this).removeClass("active");  
        $(this).addClass("inactive");
        $(".contact-details-onpage-inner").stop().slideToggle( 250 );
    }else{
        $(this).removeClass("inactive");    
        $(this).addClass("active");
        $(".contact-details-onpage-inner").stop().slideToggle( 250 );   
    }
});

$(".contact-details-onpage-inner a").hover(function(){
    $(this).find("img").eq(0).fadeOut(250);
    $(this).find("img").eq(1).fadeIn(250);
},function(){
    $(this).find("img").eq(0).fadeIn(250);
    $(this).find("img").eq(1).fadeOut(250);
});

$(".main-level-nav li").hover(function(){
    if($(this).find("ul:first").length > 0){
        /*$(this).find("ul:first").show();*/
        $(this).find("ul:first").stop().slideToggle( 250 );
    }
},function(){
    if($(this).find("ul:first").length > 0){
        /*$(this).find("ul:first").hide();*/
        $(this).find("ul:first").stop().slideToggle( 250 );
    }
});

$(".additional-nav-info1").click(function(){
    if($(".additional-nav-info-inner1").css("display") == "block"){
        $(this).removeClass("active");
        $(this).addClass("inactive");
        $(".additional-nav-info-inner1").stop().slideToggle(250);
    } else {
        $(this).removeClass("inactive");
        $(this).addClass("active");
        $(".additional-nav-info-inner1").stop().slideToggle(250);
    }
});

$(".additional-nav-info-inner1 a").hover(function(){
    $(this).find("img").eq(0).fadeOut(250);
    $(this).find("img").eq(1).fadeIn(250);
}, function(){
    $(this).find("img").eq(0).fadeIn(250);
    $(this).find("img").eq(1).fadeOut(250);
});

$(".additional-nav-info2").click(function(){
    if($(".additional-nav-info-inner2").css("display") == "block"){
        $(this).removeClass("active");
        $(this).addClass("inactive");
        $(".additional-nav-info-inner2").stop().slideToggle(250);
    } else {
        $(this).removeClass("inactive");
        $(this).addClass("active");
        $(".additional-nav-info-inner2").stop().slideToggle(250);
    }
});

$(".additional-nav-info-inner2 a").hover(function(){
    $(this).find("img").eq(0).fadeOut(250);
    $(this).find("img").eq(1).fadeIn(250);
}, function(){
    $(this).find("img").eq(0).fadeIn(250);
    $(this).find("img").eq(1).fadeOut(250);
}); 

$(".additional-nav-info3").click(function(){
    if($(".additional-nav-info-inner3").css("display") == "block"){
        $(this).removeClass("active");
        $(this).addClass("inactive");
        $(".additional-nav-info-inner3").stop().slideToggle(250);
    } else {
        $(this).removeClass("inactive");
        $(this).addClass("active");
        $(".additional-nav-info-inner3").stop().slideToggle(250);
    }
});

$(".additional-nav-info-inner3 a").hover(function(){
    $(this).find("img").eq(0).fadeOut(250);
    $(this).find("img").eq(1).fadeIn(250);
}, function(){
    $(this).find("img").eq(0).fadeIn(250);
    $(this).find("img").eq(1).fadeOut(250);
});

$(".additional-nav-info4").click(function(){
    if($(".additional-nav-info-inner4").css("display") == "block"){
        $(this).removeClass("active");
        $(this).addClass("inactive");
        $(".additional-nav-info-inner4").stop().slideToggle(250);
    } else {
        $(this).removeClass("inactive");
        $(this).addClass("active");
        $(".additional-nav-info-inner4").stop().slideToggle(250);
    }
});

$(".additional-nav-info-inner4 a").hover(function(){
    $(this).find("img").eq(0).fadeOut(250);
    $(this).find("img").eq(1).fadeIn(250);
}, function(){
    $(this).find("img").eq(0).fadeIn(250);
    $(this).find("img").eq(1).fadeOut(250);
});

$(".additional-nav-info5").click(function(){
    if($(".additional-nav-info-inner5").css("display") == "block"){
        $(this).removeClass("active");
        $(this).addClass("inactive");
        $(".additional-nav-info-inner5").stop().slideToggle(250);
    } else {
        $(this).removeClass("inactive");
        $(this).addClass("active");
        $(".additional-nav-info-inner5").stop().slideToggle(250);
    }
});

$(".additional-nav-info-inner5 a").hover(function(){
    $(this).find("img").eq(0).fadeOut(250);
    $(this).find("img").eq(1).fadeIn(250);
}, function(){
    $(this).find("img").eq(0).fadeIn(250);
    $(this).find("img").eq(1).fadeOut(250);
});

    $("ul.main-menu li").click(function()
    {
      if($(this).find(".sub").length) {
      $(".main-menu").css({"padding-bottom":'15px'});
      $(this).find(".sub").show();

    }
  });

  $("ul.main-menu li").on('mouseleave',function()
  {
    if($(this).find(".sub").length) {
    $(".main-menu").css({"padding-bottom":'0px'});
    $(this).find(".sub").hide();
    }
  });

  $("ul.testing1 li").click(function()
  {
    if($(this).find(".sub1").length) {
    $(".testing1").css({"padding-bottom":'15px'});
    $(this).find(".sub1").show();
    }
  });

  $("ul.testing1 li").on('mouseleave',function()
  {
    if($(this).find(".sub1").length) {
    $(".testing1").css({"padding-bottom":'0px'});
    $(this).find(".sub1").hide();
    }
 });

 });

我的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，我已经完成了一半的工作。我仍然无法让第二个子菜单执行我想要执行的操作。

Answer 1

你需要在

中使用clearfix类

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

并删除“ul”标签的绝对位置

 .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 */

阅读本文以了解 clearfix "http://css-tricks.com/snippets/css/clear-fix/"

Answer 2

从.main-menu ul 样式中删除position:absolute。