Смещение выпадающего меню CSS в Internet Explorer, другие артефакты тоже

Question

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

http://addproxy.net/sites/testing_space/chrome.jpg http://addproxy.net/sites/testing_space/ie.jpg

А вот CSS, который я использовал для ВСЕЙ панели навигации, потому что у меня естьТакое ощущение, что один из моих стилей из стандартной навигационной панели делает раскрывающийся список забавным:

/* home (navigation) */
#nav{
    background-image:url(images/nav_bg.png);
    position:relative;
    display:block;
    top:0;
    width:940px;
    height:42px;
    text-transform:uppercase;
    font-weight:400;
    font-size:12px;
    margin:-1px 0 0 0;
    border-bottom:1px solid #a61300;
    z-index:5;
}
#nav #language{
    font-size:10px;
    float:right;
}
#nav ul li{
    float:left;
    position:relative;
}
#nav ul li a{
    display:block;
}
/*fancy nav */
#nav ul li ul a{
    display:block;
    color:#fff;
}
#nav ul li ul {
     display:none;
     padding:10px 0;
     text-align:center;
     width:160px;
     background:#b83423;
     border:1px solid #a61300;
     margin:10px 0 0 -14px;
     z-index:10;
}
#nav ul li #esp {
    width:200px;
}
#nav ul li ul li{
    border:0;
}

#nav ul li:hover ul{
    list-style-type:none;
    display: block;
    position: absolute;
    z-index:10;
}
/*end fancy nav */
#nav a{
    text-decoration:none;
    color:#fff;
}
#nav p{
    position:relative;
    display:inline;
}
#nav a:active{
    text-decoration:none;
}
#nav a:hover{
    text-decoration:none;
}

#links{
    margin:0 0 0 10px;
}
#links li{
    display:inline;
    padding:12px 13px;
    list-style-type:none;
}
#links li{
    border-right:1px solid #a61300;
}
#links a:hover{
    color:#ddd;
}
#links a:last-child{
    border:0;
}

Вот HTML:

    <div id="nav">
    <ul id="links">
        <a href="http://conceptoservices.com/?page_id=10"><li>Home</li></a>
        <a href="http://conceptoservices.com/?page_id=13"><li>About Us</li></a>
        <a href="http://conceptoservices.com/?page_id=16"><li>Contact Us</li></a>
        <a href="#"><li>Services
            <ul>
                <a href="http://conceptoservices.com/?page_id=21"><li>Business Services</li></a>
                <a href="http://conceptoservices.com/?page_id=23"><li>Notary Services</li></a>
                <a href="http://conceptoservices.com/?page_id=25"><li>Other Services</li></a>
            </ul>
        </li></a>
        <a href="http://conceptoservices.com/?page_id=27"><li>ITIN</li></a>
        <a href="http://conceptoservices.com/?page_id=29">
        <li id="language">
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/esp.png" />
        </li>
        </a>
    </ul>
</div>

Это сообщество никогда не подводит меня.Заранее спасибо!

Answer 1

Я не могу сказать, как вы позиционируете это подменю, поэтому мои деньги на это.Попробуйте расположить его абсолютно по отношению к вашим пунктам меню, например:

#nav ul li ul {
    display: none;
    padding: 10px 0;
    text-align: center;
    width: 160px;
    background: #B83423;
    border: 1px solid #A61300;
    margin: 10px 0 0 0;
    z-index: 10;
    position: absolute;
    left: 0;
    top: 25px;
}

Вот пример, который работает в IE: http://jsfiddle.net/5faH4/show/

---

Кстати, другой пользователь указалЯ нацелился на ваше позиционирование в вашем подменю на :hover, это неправильно, вы должны расположить свое подменю на более высоком уровне, а не на событии.Мой ответ выше заботится об этом.

Answer 2

Хорошо, я не видел HTML, но я написал кое-что свое с угадыванием.Любопытно, что проблемы с IE, которые у меня возникают, совершенно разные, но, тем не менее, попробуйте это.В каждой версии IE это помогло:Редактировать: Кстати, вот HTML-код, который я использовал:

<div id="nav" style="background: #666">
            <ul id="links">
                <li><a href="giff">Guff</a>
                    <ul>
                        <li><a href="abc">Guff 1</a></li>
                        <li><a href="def">Guff 2</a></li>
                    </ul>
                </li>
                        <li><a href="ghi">Guff</a>
                            <ul>
                                <li><a href="jkl">Guff 1</a></li>
                                <li><a href="mno">Guff 2</a></li>
                            </ul>
                        </li>
            </ul>
        </div>