菜单无法在IE中单击

Question

我有一些代码可以创建一个列表,当它悬停时,下拉以显示子菜单.问题是它在IE中不起作用.当链接在IE中悬停时,它不会将菜单放下,而是将其推到右侧,使其无法单击.

此代码在FF和Chrome中完美运行,我从代码中得到的代码表示它应该可以在IE中运行.

我在编码时相当新,因为我倾向于复制和粘贴代码块并学习一点点,所以在我自己身上找出这样的东西太难了.

任何帮助将不胜感激 :)

CSS:

#dropmenu,
#dropmenu ul {
    list-style: none;
}
#dropmenu {
    float: left;
    width: auto;
}

#dropmenu li {
     width: auto;
}

#dropmenu > li {
    float: left;
    width: auto;    
}
#dropmenu li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#dropmenu ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#dropmenu ul li a {
    width: 80px;
}
#dropmenu li:hover ul {
    display: block;
}

/* Main menu
------------------------------------------*/
#dropmenu {
    font-family: Arial;
    font-size: 16px;
    background: #;
}
#dropmenu > li > a {
    color: #000;
    font-weight: normal;
}
#dropmenu > li:hover > a {
    background: #;
    color: #000;
}

/* Submenu
------------------------------------------*/
#dropmenu ul {
    background: #;
}
#dropmenu ul li a {
    color: #000;
}
#dropmenu ul li:hover a {
    background: #f16b20;
}   
#dropmenu ul li:hover a {
    color: white;
}

HTML:

<ul id="dropmenu">
    <li><a href="#">Our Company</a>
        <ul>
            <li><a href="#">Hellenico</a></li>
            <li><a href="#">Genere</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
    <li><a href="#">Our Solutions</a>
        <ul>
            <li><a href="#">Hellenico</a></li>
            <li><a href="#">Genere</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
    <li><a href="#">Service Desk</a>
        <ul>
            <li><a href="#">Hellenico</a></li>
            <li><a href="#">Genere</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
    <li><a href="#">resources</a>
        <ul>
            <li><a href="#">Hellenico</a></li>
            <li><a href="#">Genere</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a>
        <ul>
            <li><a href="#">Hellenico</a></li>
            <li><a href="#">Genere</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
</ul>

JSFiddle示例

Answer 1

刚刚完成你的css变化.DEMO

  #dropmenu li {
         width: auto;
         position:relative; /*newly added*/
    }
    #dropmenu ul {
        position: absolute;
        display: none;
        z-index: 999;
        left:0;  /*newly added*/
        top:20px; /*newly added*/
    }