Html 导致切换的下拉列表<；李>；在错误的时间关门。。。仅在I.E

我有一个标签，标题是“搜索”在我的一页顶部。当用户将鼠标悬停在选项卡上时，li元素将显示一个搜索框：

如您所见，表单中有一个选择项。。。其内容如下：

每当用户正在使用，即单击下拉菜单，然后将鼠标悬停在其中一个选项上时，搜索框就会关闭，就好像它们已被鼠标移出一样

代码如下：

<div id="goldBar">
    <ul>
        <li class="search"><a href="##" class="arrow" id="search" name="one">Search</a>
            <ul id="search">
                <li id="searchInfo">
                    <input id="query" name="query" type="text" placeholder="Search For..." /><br />
                    <select name="searchType">
                        <option value="onlineResources">Online Resources&nbsp;</option>
                        <option value="catalog">Catalog</option>
                        <option value="multiSearch">Multi-Search</option>
                        <option value="googleScholar">Google Scholar</option>
                        <option value="pubMed">PubMed</option>
                        <option value="eJournals">E-Journals</option>
                        <option value="eBooks">E-Books</option>
                    </select>
                    <input type="submit" value="Search" name="search" />
                </li>
            </ul>
        </li>
    </ul>
</div>

有人知道有什么代码可以帮助解决这个问题吗？我已经尝试了大约两个小时的不同的事情，但还没有找到一个有效的解决方案

---

提前谢谢

position:absolute的冗余使用似乎有点多，因为它可以简单地构建而不使用那种样式。您选择绝对定位所有元素是否有原因

---

我建议不要使用

position:absolute

来清理代码。还请记住：悬停仅适用于IE中的锚定

，不适用于其他元素，如

当用户单击容器外的一个选项时，下拉列表消失，不仅仅是IE，他们不再将鼠标悬停在属于该容器的元素上：使用Firefox 10：这是我使用的演示：你可能想使用

点击
处理程序，而不是
：悬停
@Andre:这是一把小提琴，享受：@Brds你有两个id相同的元素（#搜索）。虽然浏览器似乎接受，但这是无效的html，可能会导致奇怪的行为。你应该先尝试修复它。@Andre:这不是我的帖子，这是OP代码的复制粘贴，因为你说你需要有人帮你做小提琴。我要说的是，虽然dupe id是无效的，是一个问题，但它很可能不是这个问题的原因。@Madmartigan我期待OP发布小提琴，但我甚至没有检查过它。。。很抱歉…特别是IE6<代码>：hover
在IE7中有缺陷，但在大多数情况下都能工作。在非锚点上使用DTD没有问题。如果在IE中声明：hover选择器用于除的其他元素，则这是正确的。除非您是受虐狂或使用遗留代码，否则您应该始终使用DTD。
#topNavWrapper 
{
    width:100%;
    margin:0 auto 0 auto;
    background:url(images/topNav_gradient.png) #CABD90 top left repeat-x;
    border:.0625em #f3f0e9 solid;
    border-width:.125em 0 .0625em 0;
}

#goldBar 
{
    width:12.4425em;
    height:1.35em;
    padding:0 0 0 47.5575em;
    text-align:left;
    margin:0 auto 0 auto;
    position:relative;
    z-index:50;
}
#goldBar ul 
{
    padding: 0;
    margin: 0;
    list-style: none;
}
#goldBar li {font-size:1em;}
#goldBar a#resources 
{
    display:block;
    width:9em;
    height:1.45em;
    float:left;
    padding:0 0 .35em 1em;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size:.75em;
    font-weight:bold;
    font-style:italic;
    color:#403937;
    text-decoration:none;
    background:url(images/library/key.gif) #d8cfaf 95% 50% no-repeat;
    border-left:none;
    text-align:left;
}
#goldBar a#search 
{
    display:block;
    width:5.125em;
    height:1.45em;
    float:left;
    padding:0 0 .35em 1em;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size:.75em;
    font-weight:bold;
    font-style:italic;
    color:#403937;
    text-decoration:none;
    background:url(images/library/view.gif) #d8cfaf 95% 50% no-repeat;
    border-left:1px #fff solid;
    text-align:left;
}
#goldBar a.sub 
{
    display: block;
    width:7.5em;
    height:auto;
    padding:.4em 1.25em .4em 1.25em;
    background:url() #540115;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size:.75em;
    font-weight:normal;
    font-style:normal;
    line-height:1.3em;
    color:#FAF8F3;
    text-decoration:none;
    text-align:left;
}
#goldBar ul#search 
{
    display: block;
    width:8em;
    height:6em;
    padding:1em;
    background:url() #fffdf8;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size:1em;
    font-style:normal;
    text-decoration:none;
    text-align:left;
    border:1px #c7c5bf solid;
}
#goldBar ul#search a 
{
    font-style:normal;
    line-height:normal;
}
#goldBar a:hover.sub {background-color:#38010b;}
#goldBar li 
{
    float: left;
    position:relative;
}
#goldBar li ul
{
    position: absolute;
    right: 99999px;
    width:7.5em;
    border:1px #FAF8F3 solid;
}
#goldBar li ul#search 
{
    position: absolute;
    right: 99999px;
    width:18em;
}
#goldBar li:hover ul 
{
    position:absolute;
    right:0;
    top:1.25em;
}
#goldBar li:hover ul#search 
{
    position:absolute;
    right:0;
    top:1.125em;
}
#goldBar li:hover ul, 
#goldBar li:hover ul#search,
#goldBar li.goldBarhover ul,
#goldBar li.goldBarhover ul#search 
{
    right:0;
    top:1.25em;
}