0

我有一些代码可以创建一个列表，当悬停在该列表上时，它会下拉以显示子菜单。问题是它在 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 示例

4

2 回答 2

5

刚刚完成了对您的 CSS 的更改。演示

  #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*/
    }
于 2013-07-15T11:23:03.877 回答
0

添加一个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;
}
于 2013-07-15T11:01:09.887 回答