Меню меняет положение или перекрывается рядом с активным меню

Question

Я думаю, что его лучше посмотреть на URL-адрес, чтобы вы точно знали, что я имею в виду здесь. http://ymm.valse.com.my/

Когда вы нажимаете на любое из меню, меню рядом с активной вкладкой перекрывается. Почему это так? Я подозреваю, что это ширина. Я положил width: auto; такая же проблема. Я даже попытался установить ширину, как ширина: 150 пикселей; но безрезультатно. Как решить этот плз.

Я использую суперфиш.

CSS

/* Main */ 
.sf-menu { 
    width: 100%; 
    margin: 0; 
    list-style: none; 
    background-color: #2D2D2D; 
    /*border-bottom:6px solid #393939;*/ 
    z-index: 90; 
    /*background-image: linear-gradient(#444, #111);*/ 


    /*border-radius: 50px;*/ 
    /* box-shadow: 0 2px 1px #9c9c9c;*/ 


} 

.sf-menu li { 
    float: left; 
    /*padding: 10px 0;*/ 
    margin: 0 0 0 2px; 
    position: relative; 
    box-shadow: 1px 0 #222222, 
       2px 0 #383838; 
    border-bottom:6px solid #393939; 
    z-index: 100; 
} 
.sf-menu li a{ 
    display:block; padding: 10px 25px; height: 40px;color:#DDDDDD; 
} 
.sf-menu a.active{margin-top:-5px; height: 51px; padding-top: 15px; position: absolute; z-index: 100;background-color:#072438; } 
.sf-menu li a 
.sf-menu a { 
    float: left; 
    height: 20px; 
    padding: 0 25px; 
    color: #DDDDDD; 
    /* text-transform: uppercase;*/ 
    font: bold 12px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 


.sf-menu li:hover > a { 
    color: #fafafa; 
} 

*html .sf-menu li a:hover { /* IE6 */ 
    color: #fafafa; 
} 

.sf-menu li:hover > ul { 
    display: block; 
} 
.sf-menu li:last-child{ 
    box-shadow: none; 
} 


/* Sub-menu */ 
.sf-menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0;  
    display: none; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    z-index: 99999;  
    background-color: #2D2D2D; 
    border-bottom:none; 
    /* background-image: linear-gradient(#444, #111); */ 
    /*-moz-border-radius: 5px;*/ 
    /*border-radius: 5px;*/ 

} 

.sf-menu ul li { 
    float: none; 
    margin: 0; 
    padding: 0; 
    display: block; 
    box-shadow: 0 1px 0 #222222, 
       0 2px 0 #383838; 
    border-bottom:none; 
} 


.sf-menu ul a {  
    padding: 10px; 
    height: auto; 
    line-height: 1; 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 
.sf-menu ul a:hover{ 
    margin-left:10px; 
} 
*html .sf-menu ul a { /* IE6 */ 
    height: 10px; 
    /*width: 150px;*/ 
    width:auto; 

} 


*:first-child+html .sf-menu ul a { /* IE7 */  
    height: 10px; 
    /*width:150px*/ 
    width: auto; 


} 
/* active menu*/ 


     /*end */ 
.sf-menu ul a:hover { 
    /*background-color: #0186ba; 
    background-image: linear-gradient(#04acec, #0186ba);*/ 

} 

.sf-menu ul li:first-child a { 
    /*border-radius: 5px 5px 0 0;*/ 

} 



.sf-menu ul li:first-child a:after { 
    content: ''; 
    position: absolute; 
    left: 30px; 
    top: -8px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 8px solid #072438; 

} 

.sf-menu ul li:first-child a:hover:after { 
    border-bottom-color: #072438; 

} 

.sf-menu li:last-child a { 
    /*border-radius: 0 0 5px 5px;*/ 

} 

/* Clear floated elements */ 
.sf-menu:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 


* html .sf-menu    { zoom: 1; } /* IE6 */ 
*:first-child+html .sf-menu { zoom: 1; } /* IE7 */ 

HTML

<!-- Main Navigation Menu --> 
<ul class="sf-menu"> 
    <li> 
     <a href="<?php echo $data['config']['SITE_DIR']; ?>/"> 
        <img src='<?php echo $data['config']['THEME_DIR']."/img/home_1.png"; ?>' onmouseover='this.src="<?php echo $data['config']['THEME_DIR']."/img/home_2.png"; ?>"' onmouseout="this.src='<?php echo $data['config']['THEME_DIR']."/img/home_1.png"; ?>'"></a> 
    </li> 

    <li> 
     <a href="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us &#9660;</a> 
     <ul> 
      <li> 
       <a href="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
      <!--<?php #echo $data['config']['SITE_DIR']; ?>/member/branch/index">--> 
      <a href="#">Branches &#9660;</a> 
     <?php Core::getHook('block-branches'); ?> 
    </li> 
    <li> 
     <a href="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</a> 
    </li> 
    <li> 
     <a href="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</a> 
    </li> 
    <li> 
     <a href="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</a> 
    </li> 

</ul> 
<div class="clear"></div> 

сценарий, если это необходимо.

<script type="text/javascript"> 
var path = window.location.pathname.split('/'); 
path = path[path.length-1]; 
if (path !== undefined) { 
    $("ul.sf-menu") 
    .find("a[href$='" + path + "']") // gets all links that match the href 
    .parents('li') // gets all list items that are ancestors of the link 
    .children('a') // walks down one level from all selected li's 
    .addClass('active'); 
} 
</script> 

Answer 1

это из-за position: absolute на классе .active, который добавляется в a сек внутри li: абсолютное позиционирование

.sf-menu a.active { 
    margin-top: -5px; 
    height: 51px; 
    padding-top: 15px; 
    position: absolute; 
    z-index: 100; 
    background-color: #072438; 
} 

ломает элемент из потока документа, таким образом меню лечит это похоже на то, что там даже нет. Вы должны удалить это.

Update Для этого я либо добавить еще один класс для родителей li и установить border-bottom: 0. или вы можете добавить класс .active в li вместо a и изменить a, у родителя которого есть класс .active. Пример:

.sf-menu li.active{ 
    border-bottom: 0 
} 

.sf-menu li.active a { 
    margin-top: -5px; 
    height: 51px; 
    padding-top: 15px; 
    z-index: 100; 
    background-color: #072438; 
}