CSS de travail (ou ne fonctionne pas?) Étrangement

Question

Donc, ayant quelques problèmes avec mon site Web, en particulier avec le CSS. Je suis relativement nouveau dans la conception web, donc ces choses continuent à apparaître. En général, c'est facile de comprendre moi-même, mais cela m'a vraiment bloqué. Essentiellement, les deux derniers éléments de la liste non ordonnée sont déplacés vers le bas (image ci-dessous). Je ne peux pas le comprendre du tout. La seule solution que j'ai pu trouver était d'ajouter une classe et de la déplacer manuellement.

De même, le problème se produit avec IE 9.0, mais seulement si j'active javascript (ce que je dois faire pour mes éléments de sous-menu).

Tout aperçu sur ce qui se passe (et les doigts croisés là est une solution facile) serait incroyable.

<div id="main_menu"> 
      <div id="main_menu_container"> 
       <ul> 
        <li><a href=# id="home_button">Home</a></li> 
        <li><a href=# id="products_button">Products</a></li> 
        <li class="baq"><a href=# id="baq_button">Book a Quote</a></li> 
        <li><a href=#>Gallery</a></li> 
        <li class="misplace"><a href=#>About Us</a></li> 
        <li class="misplace"><a href=#>Contact Us</a></li> 
       </ul> 
      </div> 
     </div> <!--END OF MAIN MENU --> 

Et le CSS ...

div#main_menu{ 
    height:45px; 
    position:relative; 
    z-index:11; 

    background: rgb(246,246,246); 
    background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(225,225,225,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(225,225,225,1))); 
    background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%); 
    background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%); 
    background: -ms-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%); 
    background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e1e1e1',GradientType=0); 

    -webkit-box-shadow: inset 0px -1px 0px 1px rgba(255, 255, 255, .2); 
    box-shadow: inset 0px -1px 0px 1px rgba(255, 255, 255, .2); 

} 

div#shadow_1{ 
    position:relative; 
    background:url('images/shadow_grad.png') repeat-x; 
    height:6px; 
    z-index:20; 
} 

div#main_menu div#main_menu_container{ 
    width:920px; 
    height:45px; 
    margin:0 auto; 
} 

#main_menu #main_menu_container ul li{ 
    position:relative; 
    float:left; 
    list-style:none; 
    width:150px; 
    height:45px; 
    line-height:45px; 
    text-align: center; 
    margin:0px 0px; 
    padding:0px 0px; 
    z-index:21; 

    font-family: 'Roboto Condensed', sans-serif; 
    font-size:16px; 
    font-weight: 700; 
    color:#747474; 
    text-transform: uppercase; 
} 

#main_menu #main_menu_container ul li a{ 
    display:block; 
    color:#747474; 

    transition:all .05s linear; 
    -o-transition:all .05s linear; 
    -moz-transition:all .05s linear; 
    -webkit-transition:all .05s linear; 
} 

#main_menu #main_menu_container ul li.baq a{background:#3d9dff; color:white;} 

#main_menu #main_menu_container ul li a:hover{ 
    /*background:#ffab00;*/ 
    background:#ffab00; /*#3d9dff*/ 
    color:white; 
} 


li.misplace{position:relative; top:-18px;} 

code JQuery (ne sais pas vraiment jquery, donc j'ai eu quelqu'un d'autre le faire. Ce qui signifie que tous les conseils pourraient aller au-dessus de ma tête: /):

$(document).ready(function(){ 
    $("#products_button").mouseenter(function(){ 
     $(".products").addClass("active_products"); 
     $(".products_container").addClass("active_products_container"); 
    }); 
}); 

$(document).ready(function(){ 
    $(".products").mouseenter(function(){ 
     $(".products").addClass("active_products"); 
     $(".products_container").addClass("active_products_container"); 
    }); 
}); 

$(document).ready(function(){ 
    $(".products").mouseleave(function(){ 
     $(".products").removeClass("active_products"); 
     $(".products_container").removeClass("active_products_container"); 
    }); 
}); 

$(document).ready(function(){ 
    $("#home_button, #baq_button, #header").mouseenter(function(){ 
     $(".products").removeClass("active_products"); 
     $(".products_container").removeClass("active_products_container"); 
    }); 
}); 

Answer 1

il fonctionne bien ici http://jsfiddle.net/KmrZ3/1/ sans .misplace

alors peut-être il est css (ou javascript) ailleurs, vous ne montrez pas ici

Answer 2

@ user1090635 Retirez la classe li.misplace{} Modifiez ensuite les CSS Menu Centré comme celui-ci Démo: http://jsfiddle.net/bsPrabu/EtmSW/6/embedded/result/

div#main_menu div#main_menu_container { 
    width:100%; 
    text-align:center; 
    height:45px; 
    margin:0 auto; 
} 

#main_menu #main_menu_container ul 
{ 
    display:inline-block; 
    *display:inline;/* IE*/ 
    *zoom:1;/* IE*/ 
    overflow:hidden; 
    text-align:left; 
} 

Answer 3

S'il vous plaît tester le CSS suivant, j'ai nettoyé un peu et ajouté les styles requis: (J'ai changé la taille de police, s'il vous plaît définir à votre taille préférée)

div#main_menu{ 
    position:relative; 
    z-index:11; 

    background: rgb(246,246,246); 
    background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(225,225,225,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(225,225,225,1))); 
    background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%); 
    background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%); 
    background: -ms-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%); 
    background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e1e1e1',GradientType=0); 

    -webkit-box-shadow: inset 0px -1px 0px 1px rgba(255, 255, 255, .2); 
    box-shadow: inset 0px -1px 0px 1px rgba(255, 255, 255, .2); 

} 

div#main_menu div#main_menu_container{ 
    width: 1000px; 
    margin: auto; 
} 

#main_menu #main_menu_container ul li{ 
    display: inline-block; 

    list-style:none; 

    margin:0px; 
    padding:0px; 
} 

#main_menu #main_menu_container ul li a{ 
    display:block; 

    text-align: center; 
    color:#747474; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size:12px; 
    font-weight: bold; 
    text-transform: uppercase; 

    width: 150px; 
    line-height: 4em; 


    transition:all .05s linear; 
    -o-transition:all .05s linear; 
    -moz-transition:all .05s linear; 
    -webkit-transition:all .05s linear; 
} 

#main_menu #main_menu_container ul li.baq a{background:#3d9dff; color:white;} 

#main_menu #main_menu_container ul li a:hover{ 
    background:#ffab00; 
    color:white; 
}