1
虽然试图找到解决这个问题，我发现我并不孤单在IE：悬停问题，但我还没有找到一个单一的工作方案。IE10-div：hover只能部分工作，打破内部div链接
菜单在当前版本的Chrome和Firefox中完美运行，但在IE10中出现故障（未测试其他版本）。
我在页面的顶部中心有一个1/4圈的下拉菜单，它在盘旋时扩展到大约3/4的圆。它有四个部分（链接），每个部分在展开链接时分别展开。
问题是：悬停效果似乎只在将鼠标悬停在实际链接上时才起作用，尽管：悬停适用于包含div。这不会太糟糕，除了当一个部分展开链接文本之间的每个空间时，该部分会关闭。它使菜单非常波涛汹涌，难以使用。
编辑：链接到小提琴 - >http://jsfiddle.net/2GzsQ/2/
这里是菜单中的HTML：
<div id="navholder" class="">
<div id="navservice" class="outernav">
<a href="" alt="Services"><h2>Services</h2></a>
<div id="innavservice" class="innernav">
<a href="">Specimens</a> | <a href="">Collection Access</a> | <a href="">Identification</a> | <a href="">Books</a><br>
<a href="">Destructive Sampling</a> | <a href="">Loans</a> | <a href="">Specimen Submission</a><br>
<a href="">Specimen Labels</a> | <a href="">Quarantine</a> | <a href="">Data Use Conditions</a><br>
<a href="">Specimen Images</a>
</div>
</div>
<div id="navprojects" class="outernav">
<a href="" alt="Projects"><h2>Projects</h2></a>
<div id="innavprojects" class="innernav">
<a href="">Legumes of Arizona</a> | <a href="">Biodiversity Informatics</a> | <a href="">Floras</a><br>
<a href="">Nichol Turk's Head Cactus Working Group</a> | <a href="">Section 6</a><br>
<a href="">National Park Service</a> | <a href="">Pringle's Arizona Catalog</a><br>
<a href="">Type Imaging</a>
</div>
</div>
<div id="navresources" class="outernav">
<a href="" alt="Resources"><h2>Resources</h2></a>
<div id="innavresources" class="innernav">
<a href="">Convolvulaceae Pollen Atlas</a> | <a href="">Shantz Photographs</a><br>
<a href="">Convolvulaceae of Sonora</a> | <a href="">Floras for Other Regions</a><br>
<a href="">Arizona Floras and Floristic Works</a> | <a href="">Publications</a><br>
<a href="">Homer Shantz</a> | <a href="">Sample Photos</a> | <a href="">Links</a>
</div>
</div>
<div id="navariz" class="outernav">
<a href="" alt="About"><h2>About</h2></a>
<div id="innavariz" class="innernav">
<a href="">What is an Herbarium</a> | <a href="">About ARIZ</a><br>
<a href="">People</a> | <a href="">Associated Researchers</a><br>
<a href="">Our Logo</a> | <a href="">History</a> | <a href="">Donations</a>
</div>
</div>
</div>
而且，这里是菜单中的CSS：
/* div containing drop-down top white circle navigation */
#navigationc {
width: 500px;
height: 375px;
position: relative;
margin: 0 auto 0 auto;
top: -150px;
z-index: 3;
font-size: 18px;
font-size: 1.8rem;
line-height: 1.5;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
}
/* drop-down functionality */
#navigationc:hover {
top: 0;
}
/* Circle navigation */
/* moves #navservice div to top of drop-down navigation */
#navholder:hover #navservice {
margin-top: 5px;
}
/* contains the collection of links within each navigation section */
.innernav {
height: 0px;
overflow: hidden;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
transition: height 0.5s;
}
/* the first main section of the drop-down navigation menu */
#navservice {
margin-top: 155px;
-webkit-transition: margin-top 1s;
-moz-transition: margin-top 1s;
transition: margin-top 1s;
}
/* expands each menu section when it is hovered over to expose child links */
#navservice:hover #innavservice {
height: 105px;
}
#navprojects:hover #innavprojects {
height: 105px;
}
#navresources:hover #innavresources {
height: 105px;
}
#navariz:hover #innavariz {
height: 105px;
}
也许这只是我不得不接受的一个问题，但我觉得必须有一个解决方案。谢谢。
显示一个实例。 （不要指望别人通过复制和粘贴狂欢来解决_you_问题。） – CBroe
好的，我做了一个小提琴，它至少展示了这个功能。 http://jsfiddle.net/2GzsQ/ – foxandsticks
_“我在页面顶部中心有一个〜1/4圈的下拉菜单”_ - 我没有看到任何类似于一个圆圈的东西，甚至更紧密...... – CBroe