Sto riscontrando problemi con il menu di navigazione durante il check in IE 7 e 8 - navigazione, internet-explorer-7

Questo è il sito web con cui sto avendo problemi in IE 7 e 8.

http://mtcmedicalcenter.com/

Gli ultimi 2 menu che sono le carriere e contattaci sono in fondo invece di averlo accanto agli eventi e alle promozioni.

Ecco il css per il menu di navigazione.

/* ---------- Navigation ---------- */

#Menu{
margin:auto;
}

#Menu #nav {
float:left;
z-index: 9999;
width:auto;
margin: -8px auto 0 auto;
}

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
}

#nav ul li{
margin:0 auto 0 auto;
padding:0;
}

#nav .on {
color: #fff !important;
background-position: bottom left !important;
}

#nav a:link{
display:block;
padding: 15px 20px 15px 20px; /* Display: block won"t work in this example, instead we are using padding to make the hole tab a clickable link */
text-decoration: none;
margin: 0 auto 0 auto;
background-color:#2b2f6e;
}

#nav a:hover {
color:#fff;
background-color:#2b2f6e;
}

#nav a:visited {
color:#fff;
}

#nav li{
float:left;
position:relative;
text-align:left;
margin: 0 auto 0 auto;
background:transparent url("../img/divider.jpg") no-repeat right;
padding-left: 0px;
padding-right: 2px;
}
#nav ul {
position:absolute;
width:auto;
display:none;
z-index: 1;
}

#nav li ul a {
width:14em;
float:left;
background-color:#2b2f6e;
background-repeat:repeat;
}

#nav li ul a:link{
color:#fff;
}

#nav li ul a:hover {
color:#fff;
background-position: bottom left !important;
}

#nav ul li ul li a:hover{
color:#fff !important;
background-position: bottom left !important;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
margin:0 auto 0 auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
margin:0 auto 0 auto;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
margin:0 auto 0 auto;
}



#nav li.current_page_item > a,
#nav li.current-menu-ancestor > a,
#nav li.current-menu-item > a,
#nav li.current-menu-parent > a {
color:#fff;
background-color:#2b2f6e;
padding: 15px 20px 15px 20px;
}

#nav li.services-class > a {
color:#fff;
background:none;
}

.menu  #Menu li.current_page_item > a,
.menu  #Menu li.current-menu-ancestor > a,
.menu  #Menu li.current-menu-item > a,
.menu  #Menu li.current-menu-parent > a {
color:#fff;
padding: 15px 20px 15px 20px;
text-decoration: none;
background-color:#2b2f6e;
height: 30px;
}

A proposito, sto usando Wordpress per questo sito. Spero di sentirti presto ragazzi.

Grazie

risposte:

per una soluzione rapida finché ne trovi una migliore, puoi sempre impostare la larghezza del contenitore in qualcosa di più ampio del contenuto,

nel tuo caso, puoi ottenere quel contenitore dalla classe responsiveSelectContainer