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 EXAMPLE

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*/ }

Answer 2

~~向position:relative;添加#dropmenu li，这可以。也可以使用margin-left: 0;到#dropmenu li ul~~

进行尝试

我做了以下工作并为我工作：

/* added position relative */
#dropmenu li {
    position: relative;
    float: left; 
}

已移除#dropmenu > li

并将填充，背景和边距添加到#dropmenu ul

#dropmenu ul {
    position: absolute;
    display: none;
    z-index: 999;
    margin-left: 0;
    padding: 0;
    background: #fff;
}

菜单无法在IE中单击

2 个答案: