В IE мои выпадающие меню действительно выпадают.Как я могу это исправить?

Question

Я только что установил выпадающие меню на своем сайте: http://www.squeakybooks.com/ В Mozilla они работают как сон.У меня еще не было возможности проверить Safari или Chrome, но в IE выпадающие меню фактически выпадают вправо.Это ОГРОМНАЯ боль, потому что, когда вы пытаетесь щелкнуть что-то в раскрывающемся меню, это заставит СЛЕДУЮЩЕЕ раскрывающееся меню активироваться еще дальше вправо.

Однако, это работает на этом сайте:http://squeakytestblog.blogspot.com/ Несмотря на то, что я загрузил один и тот же файл .xml в оба.

Вот CSS, который я использую:

#jsddm {
width:960px;
margin: 0;
padding: 0px;
z-index:1000000000;
position:relative;
left:5%
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:0px 0px;
border: 0px solid #AAAAAA;
background: #;
background: -webkit-gradient(linear, left top, left bottom, from(#), to(#));
background: -moz-linear-gradient(top, #, #);
padding: 2px 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 0px 0;
color: #363d1b;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
text-style: center;
}

#jsddm li a:hover {
background: #;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border: 1px solid black;
text-style: center;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #96CDCD;
}

#jsddm li ul li a:hover {
background: #D3DC6E;
}

Я следовал этому руководству: allblogtools.com/ tricks-and-hacks / add-beautiful-раскрывающееся меню для блоггера /

Пожалуйста, помогите!

Answer 1

Ваше подменю не имеет какой-либо точки отсчета, откуда загружаться, чтобы исправить это, вы можете определить свой пункт меню списка как относительный и расположить ваше подменю абсолютно в left элемента меню, в котором находится элемент меню.Попробуйте это:

CSS

#jsddm li {
    float: left;
    font: 12px Tahoma,Arial;
    list-style: none outside none;
    position: relative;
}

#jsddm li ul {
    border: 1px solid black;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    visibility: hidden;
}